Issues related to the analysis of the css tree and the analysis of the DOM tree

1. Are html parsing and css parsing performed synchronously?

ans: The browser will first download the HTML parsing page to generate a DOM tree. When it encounters a css tag, it will download and parse the css. This process will not block the construction of the DOM tree. Finally, the DOM tree and the css rule tree will generate a rendering tree, and the html parsing is complete.

2. Will CSS loading block the parsing and rendering of the DOM tree?

Reference: js execution will block the parsing and rendering of the DOM tree, then will css loading block the parsing and rendering of the DOM tree
ans:

1. CSS loading will not block the parsing of the DOM tree
2. css loading will block the rendering of the DOM tree
3. css loading will block the execution of subsequent js statements

In fact, the rendering of the DOM tree that I understand is the process of constructing the render tree, because when you load the css, you may modify the style of the following DOM nodes. If the css loading does not block the DOM tree rendering, then when the css is loaded, The DOM tree may have to be redrawn or reflowed again, which causes some unnecessary loss. So I simply parse the structure of the DOM tree first, finish the work that can be done, and then wait for your css to load, and render the DOM tree according to the final style. This approach will indeed have better performance. .

3. The difference between link and @import

Reference: The difference between link and @import

1. The difference in subordination : It @importis the grammatical rules provided by CSS, which only has the function of importing style sheets; it linkis the tags provided by HTML, which can not only load CSS files, but also define RSS and rel connection attributes.
2. The difference in loading order : When the page is loaded, linkthe CSS introduced by the tag is loaded at the same time; the @importimported CSS will be loaded after the page is loaded.
3. DOM controllability difference : you can manipulate the DOM through JS and insert linktags to change the style; because the DOM method is document-based, you cannot @importinsert the style in a way that cannot be used
4. Compatibility difference : It @importis a syntax only available in CSS2.1, so it can only be recognized in IE5+; linkas an HTML element, there is no compatibility problem.