Here’s how the browser renders
- Building an HTML tree (DOM) from HTML
- Building a CSS Tree from CSS (CSSDOM)
- Merge these two trees into a Reder Tree.
- Latout layout (document flow, box model, calculated size and location)
- Paint (to draw border colors, text colors, shadows, etc.)
- Compose (display screen according to cascade relationship)
Describe what these steps look like (in detail)
Too lang. Don ‘t read:
- Process THE HTML and build the DOM tree
- Process CS and build a CSSDOM tree
- DOM tree is merged with CSSDOM tree to form rendering tree
- Layout according to the render tree to calculate the geometry of each node (layout calculates the exact position and size of each object)
- The final step is rendering, using the final render tree to render the pixels onto the screen
The first step is to have the browser merge the DOM and CSSDOM into a “render tree” that collects all the DOM content visible on the page, as well as all the CSSDOM style information for each node.
To build the render tree, the browser does the following:
- Each visible node is traversed starting at the root of the DOM tree
- For each visible node, find the appropriate CSSDOM rules and apply them
- Emit visible nodes, together with their contents and computed styles
The final output is rendered with all the visible content and style information on the screen.
With the render tree, the next stage is the Layout stage, which, as the name suggests, calculates the position of each node on the screen.
- The Layout event captures the render tree build and position and size calculations in the timeline
- The browser will issue the layout as soon as it is complete
Paint Setup
和Paint
Event, which converts the render tree into pixels on the screen according to the calculated rules