Browser

LINKS:

Understanding the Role of Rendering Engine in Browsers

How Browsers Work: Behind the scenes of modern web browsers

Process

0. resource gathering(Networking)

   download resources like html, CSS, images into your device

1. parse html & create DOM tree(Render Engine)

2. create Render tree from DOM tree(Render Engine)

   Render tree: DOM tree + CSS

   (e.g. if there is a 'display: none' on one element, this element is in DOM tree, but not in Render tree)

3. layout(Render Engine)

   calculate the explicit position of every element

4. painting(UI Backend)

Component

• User Interface

  For end-user to interact, including address bar, home button, next button and all other elements that fetch and display the web page requested by the end-user.

• Browser Engine

  Play as an intermediary or a bridge between the user interface and the rendering engine, it queries and handles the rendering engine

• Rendering Engine

  Responsible for rendering a specific web page, it interprets html and xml documents along with images that are styled or formatted using CSS, and a final layout is generated.

  Note: Every browser has its own unique rendering engine. Rendering engines might also differ for different browser versions. The list below mentions browser engines used by a few common browsers:

  0. Google Chrome and Opera v.15+: Blink
  1. Internet Explorer: Trident
  2. Mozilla Firefox: Gecko
  3. Chrome for iOS and Safari: WebKit

1.  The requested HTML page is parsed in chunks, including the external CSS files and in style elements, by the rendering engine. The HTML elements are then converted into DOM nodes to form a **“content tree” or “DOM tree.”**
2.  Simultaneously, the browser also creates a **render tree.** This tree includes both the styling information as well as the visual instructions that define the order in which the elements will be displayed. The render tree ensures that the content is displayed in the desired order.
3.  Further, the render tree goes through the **layout process.** When a render tree is created, the position or size values are not assigned. The entire process of calculating values for evaluating the desired position is called a layout process. In this process, every node is assigned the exact coordinates. This ensures that every node appears at an accurate position on the screen.
4.  The final step is to paint the screen, wherein the render tree is traversed, and the renderer’s **paint()** method is invoked, which paints each node on the screen using the UI backend layer.

• Networking

  Responsible for managing network calls using standard protocols like HTTP or FTP.

• JavaScript Interpreter

  Responsible for parsing and executing the JavaScript code embedded in a website. Once the results are generated, they are forwarded to the rendering engine for displaying on the user interface

• UI backend

  This component uses the user interface methods of the underlying operating system. It is mainly used for drawing basic widgets (windows and combo boxes).

• Data Storage/Persistence

  It is a persistent layer. A web browser needs to store various types of data locally, for example, cookies. As a result, browsers must be compatible with data storage mechanisms such as WebSQL, IndexedDB, FileSystem, etc.

Rendering engine

Parsing

HTML parsing

HTML can not be parsed using the regular top down or bottom up parsers, reasons are:

0. The forgiving nature of the language.
1. The fact that browsers have traditional error tolerance to support well known cases of invalid HTML.
2. The parsing process is reentrant. For other languages, the source doesn't change during parsing, but in HTML, dynamic code (such as script elements containing document.write() calls) can add extra tokens, so the parsing process actually modifies the input.

The algorithm consists of two stages: tokenization and tree construction.

1. tokenization

2. tree construction (a bit like state machine)

......