Learn javascript file loading optimization_javascript skills

In the js engine part, we can learn 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.

placed at the bottom of 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 so that the page can escape from the white screen as soon as possible, that is, the DOMContentLoaded event will be triggered early. However, because in IOS Safari, Android Even if you put the js script at the end of the body in browser and IOS webview, the result is still the same, so additional operations are needed here to optimize the js file loading.

DEFER LOAD

This is a script attribute defined in HTML4. It is used to indicate that 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 <=IE9.
Moreover, its execution order is strictly dependent, namely:

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

When the page is parsed, it 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 this, 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, the browser stops parsing the document, gives permission to the JS engine, and specifies the loaded script.
• 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.
The compatibility of defer is relatively poor, it 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, the file can be loaded asynchronously without causing blocking.
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 fully take advantage of the browser's concurrent loading advantage. Using static text to load async or defer will not cause this problem.

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

Regarding 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 using async, add defer at the end for backward compatibility

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

Usually, the loads we use are defer loads because of strong dependencies.

The above is the entire content of this article, I hope it will be helpful to everyone’s study.