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>

His support is <=IE9.

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

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

When the page is parsed, he will start executing the outside1 and outside2 files in order.

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

async is a newly defined script attribute in H5. It is another js loading mode.

• 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

It can be seen that async can also solve the problem of blocking loading. However, async is executed asynchronously, causing the order of executing files to be inconsistent. That is:

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

At this time, whoever finishes loading first will be executed first. Therefore, generally dependent files should not use async but defer.

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

Script asynchronous

Script asynchronous is the basic loading principle used by some asynchronous loading libraries (such as require). Directly enter the code:

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

At this time, files can be loaded asynchronously without blocking effects. However, the js files loaded in this way are out of order and dependent files cannot be loaded normally. At this time, we need to optimize the above function.

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);});

However, if you use a script to load in one step, you need to wait for the css file to be loaded before starting to load, which is not sufficient. Take advantage of your browser's concurrent loading capabilities. This problem does not occur when using static text to load async or defer.

When using a script to load asynchronously, you can only wait for the css to be loaded before loading

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

About

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.

1. The js file should be placed at the end of the body

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

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

Usually, the loading we use is defer loading because of strong dependencies.

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!