Why is domcontentloaded (blue line) completed before the css is downloaded?
認(rèn)證0級講師
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.
domcontentloaded
itself is when the HTML tag has finished loading and parsing, no need to wait for the style sheet.
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...
First of allcss
下載不會阻塞網(wǎng)頁渲染,一個網(wǎng)頁由html
和資源資源組成,其他資源的下載不會影響到html
The files themselves are downloaded concurrently.
DOM and CSSOM are independent data structures
Reference: https://developers.google.com...