Client-side JavaScript timelines that exist only in the ideal

The 1.Web browser downloads the contents of the document based on the URL address, creates documents objects, parses Web pages, HTML elements, and contains textual content, adding these nodes to the DOM tree. At this stage, the value of the Document.readystate property is loading.

2. When the parser encounters an <script> element that does not have the async and defer attributes, it adds the element to the DOM tree and starts executing the JavaScript script, which is executed synchronously. Also, the parser pauses during the download (external JS referenced by the SRC attribute) and during execution. So in these scripts you can use the document.write () method to insert the content into the input stream, which the parser uses as part of the document when it resumes parsing. You can see that the script here can see its own <script> elements, as well as the contents of their previous documents

3. When the parser encounters the <script> element with the async attribute set, it begins to download the script text, but the parser continues to parse the document. The document.write () method can no longer be used in these scripts. These scripts also have access to their own <script> elements and all previous document elements. Because these scripts execute immediately after the download is complete, you may not be able to access other document content after it.

4. When the document finishes parsing, the Document.readystate property becomes interactive

5. When the parser encounters the <script> element with the defer property set, it also downloads the script text and continues to parse the document. However, the script will be executed sequentially after the document has been parsed, so you can access the complete document tree, but the document.write () method is still not available.

6. The browser triggers the Domcontentloaded event on the Document object, which also marks the transition of JavaScript execution from the synchronous execution phase to the asynchronous event-driven phase, although the script for the async attribute may not be completed at this stage.

7. Here, the document has been resolved, but the browser may be waiting for other content to load, than tablets, flash and other external resources. When all these external resources are loaded, the async attribute's script execution completes, and the Document.readystate property becomes complete. and triggers the Load event on the Window object.

8. From this point on, asynchronous events are invoked, asynchronously responding to user input events, network events, timer events, etc.

Of course, the above time line is in our mind of a wishful thinking, each browser in the implementation of a more or less differences, and some may only support some of them, here need to pass a variety of judgments to compatible with a variety of browsers!

Client-side JavaScript timelines that exist only in the ideal