Major browsers

The major browsers we use now include chrome, Firefox, IE, Safari, Opera, UC, etc. Chrome has the largest global market share, followed by Internet Explorer. The following screenshots are obtained from www.netmarketshare.com/

The main purpose of the browser is to send requests to the server to retrieve and display resources on the server. Resource files can be HTML documents, PDF, JPG, and other types of files.

Browser components

User interface: including address bar, forward/back button, bookmark menu, etc.

Browser engine: Transfer instructions between the user interface and the rendering engine.

Rendering engine: Presents the requested content, such as parsing HTML documents and CSS content, and presents the page for the user to browse.

Network: Used for network calls, such as initiating HTTP requests. The underlying implementation is platform-independent.

User interface back end: Used to draw basic widgets, such as pop-ups. The underlying approach uses the user interface of the operating system.

JavaScript interpreter: Used to interpret and execute JS code.

Data storage: Used for browsers to store data on hard disks, such as cookies and local storage. HTML5 web database is a complete lightweight database within the browser.

Each TAB in Chrome corresponds to a rendering engine instance, and each TAB is a separate process.

Render engine main flow

The firefox rendering engine is Mozilla’s own “Gecko” engine. Safari and Chrome use the “Webkit” engine. IE uses the trident engine. Webkit is an open source rendering engine.

After the rendering engine obtains the content of the requested document through the network layer, it parses the following process:

  1. Parsing HTML documents generates a DOM construction tree. As the DOM tree is traversed, other resource files such as style files and script files for the external chain are requested. After obtaining the CSS file, the CSS file is parsed to generate the CSSOM tree.
  2. The DOM tree and CSSOM tree are combined to generate the Render tree. A Render tree is a rectangle that contains multiple visual attributes, such as style and size. The rectangles are arranged in the order in which the nodes appear on the screen.
  3. After the Render tree is built, enter the Layout stage. That is, assign specific coordinates to each node’s position as shown on the screen. The position of the node is covered by hierarchy.
  4. Render tree rendering. The rendering engine traverses the Render tree, drawing out each node from the user interface back-end layer. Instead of waiting for the entire HTML file to be parsed, the rendering engine draws as it receives the content.

How do browsers parse HTML documents

Browsers use HTML parsers to parse HTML tags into parse trees. The “parse tree” output by the parser is a tree structure of DOM elements and attribute nodes, which is the object representation of an HTML document and the basis of JS calls.

Because of the inclusiveness of the HTML language, HTML parsers cannot use conventional top-down or bottom-up parsers for parsing, so custom parsers are used for parsing. The parsing process consists of two phases: tokenization and tree building.

Tokenization: The lexical analysis process of parsing input into multiple tags. HTML tags include start tags, end tags, attribute names, and attribute values.

Tree construction: The tag generator recognizes the tag, passes it to the tree builder, which processes it, then accepts the next character for recognition, passes it to the tree builder, and so on until the end of the input.

For example, the following HTML tokenization process

<html>
  <body>
    Hello world
  </body>
</html>
Copy the code

The initial state is the data state. When the < character is encountered, the state changes to token open state. Receiving an A-Z character creates the “start tag” and the state changes to the “tag Name state”. This state remains until the > character is received. Each character received during this period is appended to the new tag name. In this case, the tags we create are HTML tags.

When a > tag is encountered, the current tag is sent and the state changes back to “data state.” Tags do the same. The HTML and body tags are now issued. Now let’s go back to “data state.” When an H character is received in Hello World, character markers are created and sent up to < in the received. We will send a character token for each character in Hello World.

Now let’s go back to the Tag Open state. When the next input character/is received, the End Tag token is created and changed to “Tag Name status”. We will hold this state again until receive >. The new tag is then sent and the “data state” is returned. The same goes for input.

For example: the following HTML tree building process

<html>
  <body>
    Hello world
  </body>
</html>
Copy the code

The input to the tree building phase is a sequence of tags from the tokenization phase. The first mode is “Initial Mode”. The HTML tag is received into “before HTML” mode, and the tag is reprocessed in this mode. This creates an HTMLHtmlElement and appends it to the Document root object.

The state will then change to “before head”. At this point we receive the “body” tag. Even without the “head” tag in our example, the system implicitly creates an HTMLHeadElement and adds it to the tree.

Now we’re in “in head” mode, and then we’re in “After head” mode. The body tag is reprocessed, HTMLBodyElement is created and inserted, and the mode changes to “in body”.

Now you receive a series of character tokens generated by the “Hello World” string. A “Text” node is created and inserted when the first character is received, and other characters are appended to that node.

Receiving the body end tag triggers the “After Body” mode. Now we will receive the HTML closing tag and go into “After After Body” mode. When the end-of-file flag is received, the parsing process ends.

The browser parses the completed action

After the browser has parsed, it marks the document as interactive and handles scripts that are executed after the document has been parsed. The document state is then set to Done and the Load event is triggered.

Refer to the article: www.html5rocks.com/zh/tutorial…