This is the 30th day of my participation in the August Challenge
The book is connected back up, and the renderer process starts working when the browser process starts sending a steady stream of data to the renderer process.
Critical path for rendering process
If the performance of the navigation process depends on the network, the performance of the rendering process depends on: the workflow of the rendering process + the amount of page content.
The Rendering process workflow is called Critical Rendering Path (Critical Rendering Path). Similar to the Critical Path method in project management, it describes the Critical Rendering Path of the entire Rendering process. If the Critical Rendering Path execution time can be shortened, the performance of the Rendering process can be optimized.
A quick note on the key render paths: The rendering process will parse the HTML file, download and parse the CSS and script in it, and generate structured data DOM TREE and CSSOM TREE. Based on these two inputs, it calculates the rendering TREE to be rendered on the page. Rander TREE, also called Style TREE, has a specific Style. Also need specific coordinates of each element, which can compute the Layout Layout, also need to confirm after drawing order, and the pages are layered, this is the output of the painting paint, finally will each layer to rasterize, incorporated into image frames, sent to the GPU process output page, of course, after will interact constantly repeat the above steps according to the page.
The DOM parsing
DOM(Document Object Module) Document Object model, which is a structured representation of HTML documents, allows code to understand and use the structure, can use scripting languages such as JavaScript to operate on it, the Web page and programming language together.
The following diagram visualizes the process of parsing an HTML file into a DOM object after the browser receives the server response data:
Here are two important processes, one is lexical analysis and Syntax analysis:
-
Lexical analysis: It is to decompose the input characters into valid tokens, which is also known as Tokenization. The tokens here are not tokens, but tokens, including opening symbols such as <body>, ending symbols </body>, attribute names, attribute values, etc.
-
Parsing: Tags are used to analyze the structure of the document according to the syntax rules of HTML language to build a parsing tree, which is DOM Tree
CSSOM parsing
When the browser parses the HTML, it also parses the style data in the external CSS files and style elements, generating CSSOM (CSS Object Module).
- CSSOM data is also structured style data that can be manipulated by programming languages;
- The parsing process is the same, but the method is slightly different because CSS syntax is different from HTML;
-
Parsing and constructing CSSOM can be done in parallel with parsing the DOM;
-
But downloading and parsing CSSOM blocks the execution of JavaScript, which is often used to query CSS style information for elements.
Preload Scanner
-
When parsing HTML files, if JS script is encountered, HTML parsing may be suspended, and script is downloaded and executed first.
-
This is because JavaScript may change the structure of the HTML document, leading to changes in the DOM Tree. Therefore, parsing of the HTML document flow cannot continue until JavaScript execution is complete.
-
To minimize the wait time, some browsers use a preload scanner feature that searches for external references while parsing HTML and downloads them in advance, so that when the parser reaches their location, the resource is ready;
-
Alternatively, developers can add async or defer properties to the script tag to tell the renderer that the script can be executed after parsing, which also improves page rendering performance;
Calculate the Render Tree
The render process, in combination with DOM and CSSOM, calculates the render tree to render on the page:
-
The nodes in the render tree include only visible nodes, those that do not appear on the page, such as < HTML >,<body>, do not appear on the render tree;
-
The renderer iterates through each node in the DOM and matches the attributes of the visible node to that node.
-
Note that nodes in the render tree and nodes in the DOM are not one-to-one. Some DOM nodes may correspond to multiple render tree nodes, such as multiple lines of text.
-
The generated render tree will be used to calculate the specific layout position of each node.
Calculate the Layout
After the rendering tree is created, there is no information about the location and size of nodes in the tree. The process of calculating the location information is called layout, also known as reflow.
-
The layout is calculated using the Box model, in which the browser views page objects as boxes and calculates their dimensions based on the screen size.
-
Layout is a recursive process. The rendering process traverses the render tree, starting from the root node, recursively traverses the entire page structure to calculate the specific location of each node.
Draw the Paint
Drawing can also be said to be a rasterizing process that ultimately transforms the layout into pixels on the screen:
-
Rasterization is to divide the screen into blocks and determine the specific style of elements in each block;
-
In the process of drawing, the layout will be decomposed into multiple layers to determine the order of drawing;
-
The rasterizer thread rasterizes each layer and stores the information in the GPU’s memory;
Synthesis of Compositing
Composition thread is to combine the rasterized layers of the previous step according to different priorities and sharpness to construct a compositor frame.
-
Priority is based on the position of the browser window, those in the display window, or near the display window, will be combined first;
-
Can also be based on the user’s zoom in and out of the page operation, synthesis of different clarity of the block;
-
After the above steps are complete, the renderer will commit a Compositor frame to the Browser process via IPC.
-
Composite frames are sent to the GPU for display on the screen. If the browser listens for a page scroll event, it tells the renderer to build another composite frame to update the page.
The above is the browser’s entire key rendering path description, thank you for reading, if there is inaccurate and error, please leave a message to correct, I will immediately correct, thank you!
Summary is not easy, please do not reprint without permission, otherwise don’t blame old uncle you are welcome
Welcome technical friends to communicate with me, wechat 1296386616
References:
The Inside look at modern web browser “By Mariko Kosaka developers.google.com/web/updates…
“How Browsers Work: Behind the scenes of modern web browsers “By Tali Garsiel and Paul Irish www.html5rocks.com/zh/tutorial…
The Critical Rendering Path “Ilya Grigorik developers.google.com/web/fundame…
“Populating the Page: How Browsers Work” MDN developer.mozilla.org/zh-CN/docs/…
The web performance management, rounding nguyen other www.ruanyifeng.com/blog/2015/0…
The front-end should know how the browser works, do you understand? _ Yang walk segmentfault.com/a/119000002…
“A look at the Chrome browser working principle” attack of scallion juejin.cn/post/684490…