First, browser rendering engine

The main module

  • A rendering engine mainly includes: HTML parser, CSS parser, javascript engine, layout layout module, drawing module

    • HTML parser: A parser that interprets HTML documents. Its main purpose is to interpret HTML text into a DOM tree.
    • CSS parser: It computes style information for individual element objects in the DOM and provides the infrastructure for layout
    • Javascript engine: Use Javascript code to modify the content of the web page, but also modify the CSS information, Javascript engine can interpret Javascript code, and through DOM interface and CSS tree interface to modify the content and style information of the web page, so as to change the rendering results.
    • Layout: After the DOM is created, Webkit combines element objects with style information, calculates their size, location and other layout information, and forms an internal presentation model that expresses all this information
    • Draw module (paint) : Use the graphics library to draw the nodes of each web page into image results after the layout calculation

    Note: Document Object Model (DOM)

Rendering process

  • The entire process of the browser rendering the page: the browser parses the document from top to bottom.

    1. When you encounter HTML tokens, call the HTML parser to parse them into tokens (a token is a serialization of tag text) and build a DOM tree (a block of memory that holds tokens and establishes relationships between them).
    2. Encountering the style/link tag calls the parser to process the CSS tag and build the CSS style tree.
    3. When script tags are encountered, javascript parsers are called to handle script tags, bind events, modify DOM /CSS trees, etc
    4. Merge the DOM and CSS trees into a render tree.
    5. Render from the render tree to calculate geometric information for each node (this process depends on the graphics library).
    6. Draw the individual nodes to the screen.

These modules rely on a number of other basic modules, including the 2D/3D image audio/video decoder and the image decoder to use the network. So the rendering engine will also include a section on how to use these dependency modules.

Block rendering

1. On CSS blocking:

Disclaimer: Only external CSS introduced by Link can block.

1. The style in the style tag: (1). (2). Do not block browser rendering (” flash screen phenomenon “may occur); (3). Do not block DOM parsing;

2. External CSS styles introduced by Link (recommended) : (1). It is parsed by a CSS parser. (2). Block browser rendering (this blocking can be used to avoid “splash screen”). But does not block the browser’s parsing (3). Blocks the following JS statement execution: (4). Non-blocking DOM parsing:

3. Optimization core philosophy: Improve external CSS loading speed as quickly as possible (1). CDN nodes are used for external resource acceleration. (2). Compress CSS (using packaging tools, such as Webpack,gulp, etc.). (3). Reduce the number of HTTP requests and merge multiple CSS files. (4). Optimize the stylesheet code

2. About JS blocking:

Block DOM parsing: The reason: The browser does not know the content of the subsequent script. If the following DOM is parsed first and the subsequent JS deletes all the DOM, the browser will have done no work. The browser cannot predict the specific operations in the script, such as document.write, and simply stop all operations. The browser then proceeds to parse the DOM. 2. Block page rendering: Reason: Js can also set the DOM style, browser also wait for this script to finish, then continue to work, to avoid useless work. 3. Block subsequent JS execution: Cause: To maintain dependencies, for example, jQuery must be introduced before bootstrap is introducedCopy the code
  1. Put it under the body
  2. defer async

3. Note

[Note 1] : CSS parsing and JS execution are mutually exclusive (mutually exclusive). CSS parsing stops JS execution, and CSS parsing stops JS execution.

[Note 2] : No matter CSS block or JS block, it will not block the browser from loading external resources (images, videos, styles, scripts, etc.). Reason: The browser always works in a mode of “send out the request first”, as long as it involves network request content, no matter: Images, styles, scripts, all send requests for resources first, and it’s up to the browser to decide when to use the resources locally. This is very efficient.

[Note 3] : Both WebKit and Firefox have pre-resolved this optimization. As the JS script executes, other threads in the browser parse the rest of the document to find and load additional resources that need to be loaded over the network. In this way, resources can be loaded on parallel connections, increasing overall speed. Note that the pre-parser does not modify the DOM tree

In the above process, the “DOMContentloaded” and “onLoad” events are triggered during the loading and rendering of the web page after the DOM tree has been built (parsed), and after the DOM tree has been built and the resources on which the page depends have been loaded

* This is a complete rendering process, but many modern web pages are dynamic, which means that after rendering is complete, the browser actually repeats the rendering process over and over again due to the animation of the page or user interaction. (Redraw and rearrange), the numbers above represent the basic order, which is not strictly consistent, and the process can be repeated or crossed