The difference between script label defer and async attribute in JS _javascript skill

The primary way to insert JavaScript code into an HTML page is through a script tag. This includes two forms, the first directly between the script tags inserted js code, the second is through the SRC attribute to the introduction of external JS file. Because the interpreter in parsing the execution of JS code will block the rest of the page rendering, for the presence of a large number of JS code page will cause the browser to appear long time blank and delay, in order to avoid this problem, it is recommended to put all the JS reference in </body> tags before.

　　The script label has two properties, defer and async, so the use of the script label is divided into three different situations:

　　1.<script src= "Example.js" ></script>

Without the defer or async properties, the browser loads and executes the appropriate script immediately. That is to say, before the document is rendered, it will be loaded and executed without waiting for subsequent loaded document elements, which can block subsequent documents loading;

　2.<script Async src= "Example.js" ></script>

With the async attribute, the loading and rendering of subsequent documents is carried out in parallel with the loading and execution of the JS script, that is, asynchronous execution;

　　3.<script defer src= "Example.js" ></script>

With the Defer property, the process of loading subsequent documents and the loading of the JS script (at which time only the load is not performed) is done in parallel (asynchronous), and JS script execution needs to wait until all elements of the document have been resolved, before the domcontentloaded event triggers execution.

The following figure shows a visual view of the differences between the three:

Where the blue represents the JS script Network load time, red on behalf of the JS script execution time, green represents HTML parsing.

　　From the diagram we can make clear a few points:

1.defer and Async in the network loading process is consistent, are asynchronous execution;

2. The difference between the two is that when the script is loaded and executed, it can be seen that defer more in line with the requirements of most scenarios for loading and executing the application scripts;

3. If there are more than one script with the defer attribute, then they execute the script in the order of loading, and for async, its load and execution are next to each other, regardless of the order of Declaration, which executes immediately as soon as the load is complete, which is not very useful for application scripts because it does not consider dependencies

Summary:

Defer and async in common are all can be loaded in parallel JS file, will not block the loading of the page, the different points is defer after the completion of the loading, JS will wait for the entire page to complete the completion of the full implementation of the load, and async is loaded after completion, will immediately execute JS, So if the implementation of JS has a strict order, then it is recommended to use defer loading.

The above is a small set of JS to introduce the script label defer and async attributes of the difference in detail, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!