Learn javascript file load optimization

In the js engine section, we learned that when the render engine parses to the script tag, it gives control to the JS engine, and if the script is loading an external resource, it has to wait until the download is complete before it can execute. So, we can do a lot of optimization here.

Place at the bottom of the BODY

In order for the rendering engine to render out the DOM tree early, we need to place script at the bottom of body, so that the page gets off the white screen early, which triggers the DOMContentLoaded event early. But since in IOS Safari, Android browser and IOS webview even if you put the js script at the end of body, the result is still the same, so there is another operation to optimize the js file loading.

DEFER load

This is one of the script attributes defined in HTML4, which is used to indicate that when the rendering engine encounters script, if script refers to an external resource, it will be temporarily suspended and loaded. The rendering engine continues to parse the HTML document below, and when it's done, it executes the script in script.

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

His approval rating is < = IE9.
And, his order of execution is strictly dependent, that is:

<script src="outside1.js" defer></script>
<script src="outside2.js" defer></script>

When the page is parsed, he starts executing the outside1 and outside2 files in order.
If you use defer below IE9, you may run into two of them that are not executed sequentially. Here you need an hack to process, that is, an empty script tag between the two

<script src="outside1.js" defer></script>
<script></script> //hack
<script src="outside2.js" defer></script>

ASYNC load

async is an script attribute newly defined by H5. It is another js loading mode.

Render engine parses file if encountered script(with async) Continue parsing the remaining files while loading script's external resources in parallel When script has finished loading, the browser pauses parsing the document, gives the permissions to the JS engine, and specifies the script to load. Once executed, the browser parsing script is restored

You can see that async also solves the problem of blocking loading. However, async executes asynchronously, which results in the files being executed in a different order. That is:

<script src="outside1.js" async></script>
<script src="outside2.js" async></script>

At this time, who load the first, the first implementation of who. Therefore, async should not be used for general dependent files but defer.
The compatibility of defer is poor, which is IE9+, but it is generally used in mobile terminal, so there is no problem.

Script asynchronous

Scripting asynchrony is the basic loading principle used by some asynchronous load libraries such as require. Direct code:

function asyncAdd(src){
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}
// loading js file 
asyncAdd("test.js");

At this point, the file can be loaded asynchronously without causing blocking effects.
However, the js files that are loaded this way are unordered and cannot load the dependent files properly.
At this point, we need to optimize the above functions.

var asyncAdd = (function(){
  var head = document.head,
    script;
  return function(src){
    script = document.createElement('script');
    script.src= src;
    script.async=false;
    document.head.appendChild(script);
  }
})();
// Load the file 
asyncAdd("first.js");
asyncAdd("second.js");
// Or simple 1 point 
["first.js","second.js"].forEach((src)=>{async(src);});

However, if script 1 is used for loading, the css file will have to wait until it has been loaded, which does not take full advantage of the concurrent loading of the browser. Loading async or defer with static text does not present this problem.

With script asynchronous loading, it can only be loaded after css has finished loading
When static async loading is used, css and js will start loading one at a time

As for the three trade-offs, it depends on what leader aims for us, whether it is compatible with IE8,9, mobile, desktop, or both.
However, for scenarios where one skill is used alone, pay attention to 1 tips.

1. The js file should be placed at the end of body
2. If async is used, defer is added at the end for downward compatibility

<script src="test.js" async defer></script> // If you support both, async Will be overwritten by default defer
// If only support 1 , then execute the corresponding 

In general, we use defer loading because of the strong dependencies.

Above is the entire content of this article, I hope to help you with your study.