Recommended reading: original CSS and JS is blocked DOM parsing and rendering
Without further ado, first look at a map:
1. browser to parse HTML generate a DOM Tree.
2. Parse the CSS will produce CSS Rule Tree.
3. After completion of the analysis, the browser engine can be constructed by DOM Tree Rendering Tree and CSS Rule Tree.
(Ps: Rendering Tree render tree is not the same DOM tree, as some like Header or display:. None no need to put things in the rendering tree)
4. The browser calls the drawing API to render the page