Html css js loading sequence, cssjs

Html css js loading sequence, cssjs

1. js will be executed immediately in the head, blocking subsequent resource download and execution. Javascript may modify the dom. If subsequent resource downloads are not blocked, the dom operation sequence is uncontrollable.

The normal webpage loading process is like this.

If the external script is loaded for a long time (for example, it cannot be downloaded all the time), it will cause the webpage to lose response for a long time, and the browser will be in the "suspended" status, which is called the "blocking effect ". Html starts to be drawn only after all js and css files in the head are loaded. However, html does not need to be started after the js files are downloaded and executed at the end of the body, therefore, placing JavaScript code at the end of the body can avoid resource blocking and quickly display static html pages. Loading all script files at the end of the web page has another benefit. DOM is called before the DOM structure is generated. JavaScript will report an error. If the scripts are loaded at the end of the webpage, this problem does not exist, because the DOM must have been generated.

 

2. js execution depends on the previous style. That is, JavaScript is executed only after all the preceding styles are downloaded. However, css and js are downloaded concurrently.

Css needs to be segmented, css of the home page is independent, and other css needs to be dynamically loaded, because html painting will be blocked by css, which can reduce the white screen time when the first entry is made.

 

3. If the js of the external link contains the defer = "true" attribute, the js will be loaded in parallel and executed only after all the pages are loaded. The js will be executed in order.

　　deferThe function of the attribute is to tell the browser to execute the specified script after the DOM is loaded.

For script labels built in instead of Connecting External scripts, and dynamically generated script labels,deferAttribute does not work.

 

4. if the js of the external link contains the async = "true" attribute, it will not depend on the execution of any js or css. This js will be executed immediately after the download is complete, and it cannot be executed in the written order. Because the async = "true" attribute tells the browser that js will not modify the dom and style, so it does not have to rely on other js and css.

　　asyncThe role of the attribute is to use another process to download the script without blocking rendering during download.

　　asyncProperty to ensure that the browser continues rendering when the script is downloaded. Note that once this attribute is used, the script execution sequence cannot be ensured. Which script is downloaded first and then the script is executed first. In additionasyncAttribute script file, should not be useddocument.writeMethod.

Generally, if there is no dependency between scripts, useasyncAttribute. If there is dependency between scripts, usedeferAttribute. If bothasyncAnddeferProperty, the latter does not work, the browser behavior is causedasyncAttributes are determined.

PS: original