Detailed explanation of loading and execution of CSS and JS

Some features of the HTML rendering process

Sequential execution, concurrent loading

Through lexical analysis, the Token object (all children of the current node) is generated through HTML After the node is generated, the sibling nodes of the current node will be obtained through next token), and finally the Dom Tree will be generated. The browser can support concurrent requests. Different browsers support different numbers of concurrency (divided by domain names). Take Chrome as an example. The upper limit of concurrency is 6.
Optimization points: Distribute CDN resources under multiple domain names

Whether it is blocked

CSS:
Putting CSS in the head will block the rendering of the page (that is, It is said that the rendering of the page will wait until the css loading is completed)
CSS blocks the execution of JS (because the GUI thread and the JS thread are mutually exclusive, because it is possible that JS will operate CSS)
CSS does not block the loading of external scripts (not Blocks the loading of JS, but blocks the execution of JS, because browsers will have pre-scanners) JS:
Directly introduced JS will block the rendering of the page (GUI thread and JS thread are mutually exclusive)
JS does not block resources Loading (this depends on chrome's preloading mechanism)
JS is executed sequentially, blocking the execution of subsequent JS logic

Dependencies

Page rendering depends on the loading of CSS
(Since the page is waiting for Dom Tree and Css Tree to be generated before rendering, why do you need to put CSS in Head)
(Because CSS may be loaded asynchronously, in order to ensure dependencies, CSS needs to be placed in the head)
Dependencies of JS execution order
Dependencies of JS logic on DOM nodes

Introduction method

CSS introduction link @ importJS introduction
Direct introduction
defer (does not block page rendering, sequential execution)
async (does not block page rendering, does not guarantee sequential execution)
Asynchronous dynamic introduction of JS

The blue line represents network reading, the red line represents execution time, both of which are for scripts; the green line represents HTML parsing.

Some optimization points for loading and execution

• CSS style sheet on top (blocking page rendering)

• Use link instead of @ import (1. @import is at the CSS level and will not trigger the browser concurrency mechanism; 2. It is introduced after the CSS is loaded. But in modern browsers, there is no such difference in performance between @import and link. . )

• Place the js script at the bottom (because the browser has concurrency restrictions, so put the js below to reduce the number of concurrency occupied and enable the page to be rendered faster. )

• Reasonably use the asynchronous loading capability of js

The rendering mechanism of the browser

The above is the detailed content of Detailed explanation of loading and execution of CSS and JS. For more information, please follow other related articles on the PHP Chinese website!