Will css block web page rendering?

Question

Why is domcontentloaded (blue line) completed before the css is downloaded?

Answer 1

1. The browser starts to parse the target HTML file, and the order of execution flow is top-down.
2. The HTML parser converts the HTML structure into the basic DOM (Document Object Model). After the DOM tree is built, the DomContendLoaded event is triggered.
3. The CSS parser parses CSS into CSSOM (Cascading Style Sheet Object Model), a tree containing only style information.
4. CSSOM and DOM begin to merge to form a rendering tree, and each node begins to contain specific style information.
5. Calculate the position information of each node in the rendering tree, which is the layout stage.
6. Display the laid out rendering tree on the interface.

Answer 2

domcontentloaded itself is when the HTML tag has finished loading and parsing, no need to wait for the style sheet.

Answer 3

The link method loads css at the same time as the web page is loaded

Answer 4

DOMContentLoaded event will be fired when the initial HTML document has finished loading and parsing, without waiting for stylesheets, images and subframes to be fully loaded.
Reference: https://developer.mozilla.org...

Answer 5

First of allcss下载不会阻塞网页渲染，一个网页由html和资源资源组成，其他资源的下载不会影响到htmlThe files themselves are downloaded concurrently.

Answer 6

DOM and CSSOM are independent data structures
Reference: https://developers.google.com...