The difference between HTML5 defer and async

The main way to insert JavaScript in an HTML page is to use the <script> element. This element was created by Netscape and first implemented in Netscape Navigator 2. Later, this element was added to the formal HTML specification. HTML4.01 defines 6 attributes for <script>, including defer and async. Both defer and async are optional and only valid for external script files.

  A when the browser resolves to a script script without defer or async:  <script src= "Main.js" ></script> browser will immediately load and execute the specified script, "immediate" refers to the document element under which the script tag is rendered, which means that it is loaded and executed without waiting for the subsequent loaded documents element to be read.   Second, when the browser resolves to a script script, there is async:  <script async src= "Main.js" ></script> browser will download the script immediately, but does not interfere with other actions on the page, For example, download additional resources or wait for other scripts to load. The process of loading and rendering subsequent document elements and the loading and execution of Main.js are performed in parallel (asynchronously).  async is not guaranteed to execute in the order in which the scripts appear, so it is important to ensure that they are not dependent on each other, and that the purpose of specifying the async attribute is to not allow the page to wait for two scripts to be downloaded and executed to asynchronously load the rest of the page, suggesting that the asynchronous script do not modify the DOM during loading.   Asynchronous scripts must be executed before the Load event of the page, but may be executed before or after the domcontentloaded event is triggered. Browsers that support asynchronous scripting have Firefox 3.6, Safari 5, and Chrome.   Third, when the browser resolves to script scripts, when there is defer:  <script defer= "defer" src= "Main1.js" ></script><script defer= The "defer"  src= "Main2.js" ></script> indicates that the script is deferred until the document is fully parsed and displayed, and the process of loading subsequent document elements is performed in parallel (asynchronously) with the main.js load. The HTML5 specification requires scripts to be executed in the order in which they appear, so the first deferred script executes before the second deferred script, and the scripts precede the domcontentloaded event. In reality, deferred scripts are not necessarily executed in sequence or before the domcontentloaded event is triggered, so it is best to include only one deferred script. &NBSP;IE4~IE7 also supports defer properties for embedded scripts, but IE8 and later versions fully support HTML5-defined behavior.  ie4,firefox 3.5,safari 5 and Chrome are the first browsers that support defer properties。 Other browsers Hu ignores this property and handles the script as usual, so putting the deferred script at the bottom of the page is still the best option. The    Blue line represents the network read, the red line represents the execution time, both are for scripting, and the Green Line represents HTML parsing.   This diagram tells us the following points:  defer and async in the network read (download) This piece is the same, is asynchronous (compared to HTML parsing) it is the difference between when the script is downloaded after the execution, apparently defer is closest to our request for application script loading and execution for defer, the picture is that it executes the script in the load order, which is to make good use of async is a random execution of the main, anyway, the script is loaded and executed next to each other, so regardless of the order of your declaration, As long as it's loaded, it's going to be done right away. It is not very useful for application scripts because it does not consider dependencies at all (even the lowest order), but it is very suitable for scripts that do not rely on any script or are not dependent on any script, the most typical example: Google Analytics

HTML5 the difference between defer and async