A brief analysis of JavaScript asynchronous loading_javascript skills

Foreword

I believe you have encountered many problems with JavaScript script loading. Mainly in a few points——

1> File loading, file dependency and execution order issues caused by synchronous scripts and asynchronous scripts
2> Performance optimization issues caused by synchronous scripts and asynchronous scripts

A thorough understanding of all aspects related to script loading will not only help solve practical problems, but also help grasp and implement performance optimization.

First look at any script tag code——

Copy code The code is as follows:

If placed above the , it will block all page rendering work, leaving the user in a "white screen of death" state until the script is loaded and executed. The script at the end of will only allow users to see a lifeless static page. The place where client-side rendering should be performed is scattered with ineffective controls and empty boxes. Get a test case -

Copy code The code is as follows:

I am the content

Among them, the content in test.js——

Copy code The code is as follows:

alert('I am the script code in the head. After executing the js here, the content rendering of the body will start!');

We will see that alert is a pause point, and at this time, the page is blank. But please note that the entire page has been loaded at this time. If the body contains tags with certain src attributes (such as the img tag above), the browser has already started loading related content. In short, please note that the working timing of the js engine and the rendering engine are mutually exclusive (some books call it the UI thread).

Therefore, we need - those scripts responsible for making the page look better and easier to use should be loaded immediately, while those scripts that can be loaded later should be loaded later.

1. Delayed execution of script

It is becoming more and more popular to place scripts at the end of the tag of the page. In this way, on the one hand, users can see the page faster, and on the other hand, scripts can directly operate on the loaded DOM elements. For most scripts, this "move" is a huge improvement. The page model is as follows——

Copy code The code is as follows:

This does speed up the rendering time of the page significantly, but be aware that this may give the user a chance to interact with the page before the bodyScript is loaded. The reason is that the browser cannot load these scripts until the entire document has been loaded, which can be a bottleneck for large documents sent over slow connections.

Ideally, the loading of the script should occur simultaneously with the loading of the document and not affect the rendering of the DOM. This way, you can run the script once the document is ready because the scripts have already been loaded in the order of the <script> tags. </p> <p></p> <p>We can use defer to fulfill this requirement, that is - </p> <p><br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="92200" class="copybut" id="copybut92200" onclick="doCopy('code92200')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code92200"> <br> <script src="deferredScript.js"></script>