Detailed explanation of how to optimize code for javascript file loading

In the js engine part, we can understand that when the rendering engine parses the script tag, it will give control to the JS engine. If the script loads an external resource, it needs to wait until it is downloaded before it can be executed. So, here, we can do a lot of optimization work on it.

Place it at the bottom of the BODY

In order for the rendering engine to render the DOM tree as early as possible, we need to place the script at the bottom of the body. If the page leaves the white screen as soon as possible, the DOMContentLoaded event will be triggered early. However, even if you put the js script at the end of the body in IOS Safari, Android browser and IOS webview, the result will still be the same, so additional operations are needed to deal with the js File loading is optimized.

DEFER loading

This is a script attribute defined in HTML4, which is used to indicate that when the rendering engine encounters a script , if the script refers to an external resource, it will be temporarily suspended and loaded. The rendering engine continues to parse the following HTML document. When the parsing is completed, the script in the script will be executed.

##

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

And, its execution order is strictly dependent, that is:

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

If you use defer below IE9, you may encounter that the two of them are not executed sequentially. A hack is needed to handle it, that is, add an empty script tag between the two.

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

ASYNC loading

• The rendering engine parses the file, if it encounters script(with async)

• Continue to parse the remaining files and load the external resources of the script in parallel

• When the script is loaded, then The browser pauses parsing the document, gives permission to the JS engine, and specifies the script to be loaded.

• After execution, the browser parsing script will be restored

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

defer has poor compatibility and is IE9+, but it is generally used on mobile terminals, so this problem does not exist.

Script asynchronous

function asyncAdd(src){
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}
//加载js文件
asyncAdd("test.js");

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);
  }
})();
//加载文件
asyncAdd("first.js");
asyncAdd("second.js");
//或者简便一点
["first.js","second.js"].forEach((src)=>{async(src);});

When using static async loading, css and js will be loaded concurrently

How to choose between these three, it mainly depends on what goal the leader gives us, whether it is compatible with IE8, 9, mobile phone, desktop browser, or a combination of two or two. But for the scenario of using a certain skill alone, you need to pay attention to some
tips when using it.

2. If async is used, add defer at the end for backward compatibility

<script src="test.js" async defer></script> //如果两者都支持，async会默认覆盖掉defer
//如果只支持一个，则执行对应的即可

The above is the detailed content of Detailed explanation of how to optimize code for javascript file loading. For more information, please follow other related articles on the PHP Chinese website!