Browser rendering engine and blocking
1. Browser rendering engine
Main module
- A rendering engine mainly includes: HTML parser, CSS parser, javascript engine, layout module, drawing module
- HTML parser: A parser that interprets HTML documents. The main function is to interpret HTML text into a DOM tree.
- CSS parser: its role is to calculate style information for each element object in the DOM, and provide infrastructure for layout
- Javascript engine: Use Javascript code to modify the content of the webpage and also modify the css information. The javascript engine can interpret the javascript code and modify the content and style information of the webpage through the DOM interface and CSS tree interface, thereby changing the rendering result.
- Layout (layout): After the DOM is created, Webkit needs to combine the same type information of the element objects in it, calculate their size and position and other layout information to form an internal representation model that can express all of this information
- Drawing module (paint): use the graphics library to draw the nodes of each webpage after the layout calculation into image results
Note: Document Object Model (Document Object Model, DOM for short )
Rough rendering process
- The whole process of the browser rendering the page: the browser will parse the document from top to bottom.
- When encountering HTML tags, call the HTML parser to parse into the corresponding token (a token is the serialization of a tag text) and build a DOM tree (that is, a piece of memory, which stores tokens and establishes the relationship between them).
- When the style/link tag is encountered, the corresponding parser is called to process the CSS tag and build a CSS style tree.
- When the script tag is encountered, the javascript engine is called to process the script tag, bind events, modify the DOM tree/CSS tree, etc.
- Combine the DOM tree and the CSS tree into a render tree.
- Render according to the render tree to calculate the geometric information of each node (this process needs to rely on GPU).
- Finally, each node is drawn on the screen.
These modules rely on many other basic modules, including network storage 2D/3D image audio video decoder and picture decoder.
So the rendering engine will also include how to use these dependent modules.
Two, blocking rendering
1. About css blocking:
Disclaimer: Only external css introduced by link can cause blocking.
1. The style in the style tag:
(1). parsed by the html parser;
(2). does not block browser rendering (may produce "flash screen phenomenon");
(3). does not block DOM parsing;
2. External css style introduced by link (recommended method):
(1). It is parsed by CSS parser.
(2). Block browser rendering (this blocking can be used to avoid "flash screen phenomenon").
(3). Block the execution of the following js statement
(4). Do not block the DOM parsing (the way most browsers work):
3. Optimize the core concept: improve the loading speed of external css as fast as possible
(1). Use CDN nodes to accelerate external resources.
(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 code of the style sheet
2. About js blocking:
1. Block subsequent DOM parsing:
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 following DOM,
then the browser has done useless work and the browser cannot predict Estimate the specific operations performed in the script, for example, operations such as document.write
, and simply stop. After the script is executed, the browser will continue to analyze the DOM downward.
2. Block page rendering:
Reason: JS can also set styles for the DOM, the browser waits for the script to be executed, and renders a final result, avoiding useless work.
3. Block the execution of subsequent js:
Reason: maintain dependency, for example: jQuery must be introduced first and then bootstrap
3. Remarks
[ Note 1 ]: CSS parsing and js execution are mutually exclusive (mutually exclusive), js stops executing when css is parsed, and css stops parsing when js is executed.
[ Note 2 ]: Regardless of css blocking or js blocking, it will not block the browser from loading external resources (pictures, videos, styles, scripts, etc.).
Reason: the browser is always in a job : " send the request first " Mode, as long as it involves the content of the network request, whether it is: pictures, styles, scripts, it will first send a request to obtain resources. As for when the resources are used locally, the
browser itself coordinates this approach is very efficient.
[ Note 3 ]: Both WebKit and Firefox have performed the [pre-analysis] optimization. When executing the js script, other threads of the browser will pre-parse the rest of the document,
find and load other resources that need to be loaded over the network. In this way, resources can be loaded on parallel connections,
thereby increasing the overall speed. Note that the pre-parser does not modify the DOM tree
In the above process, the DOMContentLoaded and onload events will be triggered during the loading and rendering of the webpage
, respectively, after the DOM tree is constructed (parsed), and after the DOM tree is constructed and the resources that the webpage depends on are loaded.
- The above is a complete rendering process, but many modern web pages are dynamic, which means that after the rendering is completed, due to the animation of the web page or user interaction,
- In fact, the browser has been repeatedly executing the rendering process. (Redraw and rearrange), the above numbers indicate the basic order, which is not strictly consistent. This process may be repeated or intersected
3. Schematic diagram of the browser rendering process
