JS Script delay

Since the opening of the blog, I will come back from work hurriedly after dinner door a close and so on a computer opened hurriedly research things, so that friends are wondering if I have autism

In fact, because I have the fear of my own technology, which day can not keep up with society, speaking of technology I think the technology is not seeking the new better, but the more stable the better, for the moment, the former framework of a variety of, slick, one by one will

Don't brag, it seems to me to find my frame thoroughly understand it. Don't brag, return to the point.

============================================================================================ We look at the JS script today delay

Let's start by looking at how the browser handles the script.

1. browser while downloading HTML page, start parsing

2. Discovery <script> tags during parsing

3. Pause parsing, control of page rendering is forwarded to JavaScript engine

4. If the <script> tag references an external script, download the script, or directly execute

5. After execution, control is returned to the rendering engine to parse 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".

To avoid this, it's a good idea to <script> put the labels at the bottom of the page, not the head.

How do you stop this state?

Properties to resolve

1.anync: Changing the properties means downloading the script immediately, but should not interfere with the other actions of the page, the script is only valid for external scripts, is asynchronous script processing

<! DOCTYPE html><src=async>

</

<src=async></script>            
The purpose of the Async property is to download the script using another process that does not block rendering when it is downloaded.
How does the browser render it?
The browser starts parsing the HTML page parsing, discovering that the script tag browser with the Async attribute continues to parse the HTML Web page, while downloading the external script script in the Script tab in parallel, and then pausing parsing the HTML page. The script that starts the download executes and the browser resumes parsing the HTML page 
Note: The async attribute 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. 
2..defer
Defer is also a script delay, the difference is that the browser encounters the property is not immediately execute the script, but wait until loaded into the 
Steps
When the browser starts parsing the HTML page parsing, it discovers that the script tag browser with the Defer property continues to parse the HTML page, while downloading the external script browser in the script tag to parse the HTML page in parallel. Execute the downloaded script at this time   
<src= "A.js"  defer></script>  <src= "B.js"  defer></script  >
In contrast to Async's level >defer
=============================================================================================================== ===========================
How much does the defer attribute know?
Defer properties are currently supported in all browsers, but Chrome and Firefox are only defer when loading external scripts, and it is not useful for inline scripts to use defer. And in IE, whatever the situation, defer are effective.
Defer's role is to prevent the script from executing as soon as the download is complete, delaying the script until all script loading is complete, before domcontentloaded, and, in layman's words, sequential load delay execution. Although they were performed before domcontentloaded, the sequence of execution of various scripts executed between browsers was different. Look at the following example:
　　
Several questions can be seen from the above:
First, the IE9 below does not support domcontentloaded (which is explained later)
Second, verify that the above-mentioned Chrome and Firefox inline scripts do not support the Defer property
Finally, defer does achieve the purpose of deferred execution, without blocking the loading and execution of subsequent scripts. However, the time-consuming operation will still block the domcontentloaded event, and in most cases everyone will attach the page initialization script to the Domcontentloaded event, so the defer method is not a good solution to this problem
END
While script-behind and asynchronous loading can reduce the impact of script loading on the page, even if asynchronous loading is implemented, the script will still block the entire page (except using Web Worker) because the browser's script parsing is single-threaded, so the user cannot complete the normal interaction. , so to really thoroughly optimize the page load, you also need to start with the optimization of the code.
JS Script delay