js timeline and defer async

Add Element object 1. Create a Document object, start parsing web pages, parsing HTML elements and their text content and Text node into the document. This phase Document. readyState = "loading".

 2. encountered external link css, create a thread to load and continue to parse the document.

 3. encountered external js script, and there is no set async, defer, the browser loads, and blocked waiting for js loaded and execute the script, and then continue to parse the document

 4. The script encountered external js, and is provided with async, defer browser creates threads to load and continue to parse the document, immediately executed (asynchronous prohibited docuemnt.write ()) after the async attribute for the script, the script has finished loading.

 5. encountered img tags, etc., to parse the normal structure of dom, then the browser loaded asynchronously src, and continues to parse the document

 6. When the document is parsed, document.readyState = "interactive";

 7. document analysis is complete, all provided defer the script will execute the order.

 8 .. When the document is parsed, document object triggers DOMContentLoaded event, which also marked the program is executed from the synchronization script execution stage, transformed into event-driven stage

 9. When all saync script is loaded and executed, such as after img loaded, document.readyState = "complete" window object triggers the load event

10. Since, in the page manner in response to a user input asynchronously, network events.

defer  

If the scriptlabel set this attribute, the browser will download the file asynchronously without affecting the subsequent DOMrendering;
if there are multiple sets deferof scriptlabels exist, will perform all of the order script;
deferthe script is finished rendering the document , DOMContentLoadedbefore the event called for execution

aysnc

asyncSetting, will make the scriptscript asynchronously loaded and executed in the case allow the
asyncexecution of, and not pressing scriptto execute the order page, but whoever who finished loading execution.

 

Four js files are 1,2,3,4

<script>

        console.log(0)

 </script>

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

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

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

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

    No time to make any changes in the output 01234

When coupled to a third attribute aysnc or defer the result becomes 01243

 

<script>

        console.log(0)

        

    </script>

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

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

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

    <script defer src="sc1.js"></script>

The result is 03241 

Both will not stop parsing the document

defer happen in this order (you can use these two oh!) before DOMContentLoaded

async is downloaded immediately executed, not necessarily before DOMContentLoaded

async because the order has nothing to do, so it is suitable not rely on scripts such as Google Analytics