Client-Side JavaScript Timeline

【Client-Side JavaScript Timeline】

1. The web browser creates a Document object and begins parsing the web page, adding Element objects and Text nodes to the document as it parses HTML ele- ments and their textual content. The document.readyState property has the value “loading” at this stage.

2. When the HTML parser encounters <script> elements that have neither the async nor defer attributes, it adds those elements to the document and then exe- cutes the inline or external script. These scripts are executed synchronously, and the parser pauses while the script downloads (if necessary) and runs. Scripts like these can use document.write() to insert text into the input stream. That text will become part of the document when the parser resumes. Synchronous scripts often simply define functions and register event handlers for later use, but they can tra- verse and manipulate the document tree as it exists when they run. That is, syn- chronous scripts can see their own <script> element and document content that comes before it.

3. When the parser encounters a <script> element that has the async attribute set, it begins downloading the script text and continues parsing the document. The script will be executed as soon as possible after it has downloaded, but the parser does not stop and wait for it to download. Asynchronous scripts must not use the  document.write() method. They can see their own <script> element and all docu- ment elements that come before it, and may or may not have access to additional document content.

4.  When the document is completely parsed, the document.readyState property changes to “interactive”.

5.  Any scripts that had the defer attribute set are executed, in the order in which they appeared in the document. Async scripts may also be executed at this time. De- ferred scripts have access to the complete document tree and must not use the document.write() method.

6. The browser fires a DOMContentLoaded event on the Document object. This marks the transition from synchronous script execution phase to the asynchronous event-driven phase of program execution. Note, however, that there may still be async scripts that have not yet executed at this point.

7.  The document is completely parsed at this point, but the browser may still be waiting for additional content, such as images, to load. When all such content finishes loading, and when all async scripts have loaded and executed, the document.readyState property changes to “complete” and the web browser fires a load event on the Window object.

8.  From this point on, event handlers are invoked asynchronously in response to user input events, network events, timer expirations, and so on.