Issues related to file loading optimization in js

Below I will share with you an article based on js file loading optimization (detailed explanation), which has a good reference value and I hope it will be helpful to everyone.

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 to allow the rendering engine to render the DOM tree as early as possible, we need to place the script at the bottom of the body so that the page can be detached as soon as possible The white screen phenomenon means that 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 here to optimize js file loading.

DEFER loading

This is a script attribute defined in HTML4, which is used to represent , when the rendering engine encounters a script, if the script refers to an external resource, it will temporarily suspend and load. 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

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 sequence.

If you use defer below IE9, you may encounter that the two of them are not executed sequentially. Here you need a hack 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)

continues to parse the remaining files and loads the external resources of the script in parallel.

When the script is loaded , the browser stops parsing the document, gives permission to the JS engine, and specifies the script to be loaded.

After execution, resume the browser parsing script

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 should use 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 cannot make full use of the browser. Advantages of concurrent loading. This problem does not occur when using static text to load async or defer.

When using scripts 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 this How to choose between the three depends mainly on what goal the leader gives us, whether it is compatible with IE8, 9, mobile phone, desktop browser, or a combination of two.

But for the scenario of using a certain skill alone, you need to pay attention to some tips when using it.

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

If you use async, add defer at the end for backward compatibility

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

Usually, The loads we use are all defer loads (because of strong dependencies).

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Using Async and Await functions in Node.js

##Solution to the problem that webpack cannot access 127.0.0.1

Implement remote access configuration method in webpack-dev-server

The above is the detailed content of Issues related to file loading optimization in js. For more information, please follow other related articles on the PHP Chinese website!