HTML,CSS,JS load Order

1.js placed in the head will be executed immediately, blocking the subsequent download and execution of the 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 normal page loading process is like this.

1. Browser while downloading HTML page, start parsing
2. During the parsing process, the Discovery <script> label
3. Pause parsing, control of page rendering to the JavaScript engine
4. If the <script> tag refers to an external script, download the script, or execute it directly
5. After execution, control is returned to the rendering engine, parsing the HTML page down

If the external script takes a long time to load (for example, it has been unable to complete the download), it will cause the webpage to lose its response for a long time, and the browser will appear "suspended animation", which is called "blocking effect". HTML needs to wait for all of the head in the JS and CSS loading is completed before starting to draw, but HTML does not need to wait for the body of the last JS download execution will begin to draw, so JS placed in the body of the last side, you can avoid resource blocking, while the static HTML page display quickly. There is also a benefit to placing the script files at the end of the page. Calling Dom,javascript before the DOM structure is generated will be an error, and if the script is loaded at the end of the page, there is no problem because the DOM must have been generated.

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.

CSS needs to block, the homepage 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.

3. 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.

　　deferThe function of the property is to tell the browser to wait until the DOM load is complete before executing the specified script.

1. Browser starts parsing HTML page
2. During parsing, defer a script tag with attributes is found
3. The browser continues to parse the HTML page and concurrently downloads the external script in the script tag
4. The browser finishes parsing the HTML page and then executes the downloaded script

　　The properties do not work for script tags built into the external script, and for dynamically generated script tags defer .

4. 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.

　　asyncThe function of a property is to download the script using another process that does not block rendering when it is downloaded.

1. Browser starts parsing HTML page
2. During parsing, async labels with attributes are found script
3. The browser continues to parse the HTML page and simultaneously downloads script the external script in the tag
4. The script download completes, the browser pauses parsing the HTML page, starts to execute the downloaded script
5. The browser resumes parsing the HTML Web page after the script is executed

　　asyncProperty ensures that the browser continues rendering while the script is being downloaded. It is important to note that once this attribute is used, the execution order of the scripts cannot be guaranteed. Which script will download the end first, execute the script first. In addition, async a method should not be used in a script file that uses attributes document.write .

In general, if there are no dependencies between scripts, use async attributes and use attributes if there is a dependency between the scripts defer . If both the and attributes are used, the async defer latter does not work, and the browser behavior is determined by the async property.

Ext.: https://www.cnblogs.com/yingsong/p/6170780.html

HTML,CSS,JS load Order