script tag distinguishing property of the async and defer

Reprinted from: https://segmentfault.com/q/1010000000640869

First to try to explain a word Sa, when the browser encountered  script when the script:

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

   No  defer or  asyncbrowser will load immediately and executes the specified script, "immediately" refers to the rendering of the  script prior document elements under the label, that does not wait for subsequent loading of document elements, read it loads and executes.

2. <script async src="script.js"></script>

   There  async, during subsequent loading and render the document element and  script.js the load in parallel with the execution (asynchronous).

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

   There  defer, the loading process and the follow-up document elements will  script.js load in parallel (asynchronous), but  script.js the execution to be, after the completion of the analysis of all elements DOMContentLoaded completed before the event is triggered.

Then it from a practical point of view, first of all scripts are thrown  </body> before a best practice, because for older browsers, this is the only choice optimization, this method can ensure all other elements of non-scripts with the fastest speed is load and parse.

Next, we look at a map slightly:

Blue line represents the network read, the red line represents the execution time, maybe for all scripts; green line represents the HTML parsing.

This figure tells us the following points:

1. defer  and  async  read (download) network this child is the same, are asynchronous (compared to HTML parsing)
2. Talia difference is that after the script is downloaded when to perform, obviously  defer  is the closest we have to use a script to load and execute the requirements of
3. About  the defer , this figure is that it is not entirely in accordance with the load order of execution of the script, which is to be put to good use
4. async  is a master out of order, and anyway it is loaded and executed script is tightly next, so no matter how you declare the order, as long as it loads everything will be executed immediately
5. Think about it, the async  to use application scripting is unlikely, because it does not consider reliance (even if it is the lowest level of execution order), but it is for those who can not rely on any script or script is not dependent on any script it is very suitable, the most typical example: Google Analytics

Tips:

HTTP: //ued.ctrip.com/blog/scr ...  the defer the async script Ctrip Design Council and the inside of this article describes in detail the very, very authoritative inside references. However, there are a mistake "Every script defer property are resolved after the page is completed, in accordance with the original order of execution, and it will be executed before the DOMContentLoaded document." ------------- -HTML5 specifications script execution should be performed in the order of the script appears, but in reality, not necessarily in order of delay script execution! ! ! js in the async download will be executed immediately after (the order so the script is not the order of the script in the code is executed, the script might appear behind the first implementation).