About JS CSS HTML loading order collation

1.js is immediately executed in the head and blocks subsequent downloads and executions of resources. Because JS has the potential to modify the DOM, the DOM's sequence of operations is not controlled without blocking subsequent resource downloads.

The execution of 2.js relies on the preceding style. That is, only the previous style of the complete download will not be executed JS, but at this time outside the chain of CSS and outside the chain JS is downloaded in parallel.

The 3.js is placed on the last side of the body to avoid resource blocking while allowing static HTML pages to be displayed quickly.

4. Outside the chain of JS if it contains defer= "true" property, will be loaded in parallel JS, until the completion of the full load of the page will be executed, will be executed sequentially.

5. Outside the chain of JS if it contains async= "true" attribute, will not rely on any JS and CSS execution, this JS download is done immediately after completion, not guaranteed to be executed in the order of writing. Because the async= "true" property tells the browser that JS does not modify the DOM and style, it does not have to rely on other JS and CSS.

6.html needs to wait until all the JS and CSS loads in the header are complete before you start drawing.

7.html does not need to wait to be placed in the body last JS download execution will start drawing.

8.css need to block, the first page of the CSS Independent, the rest of the CSS needs to be loaded dynamically, because the HTML drawing will be blocked by the CSS, this can reduce the first time to enter the white screen.

About JS CSS HTML loading order collation