Learn JavaScript file load optimization _javascript tips

In the JS engine section, we can understand that when the rendering engine resolves to the script tag, the control is given to the JS engine, and if the script loads an external resource, it needs to wait for the download to execute. So, here, we can do a lot of optimization work on it.

Place at the bottom of the body

In order for the rendering engine to render the DOM tree early, we need to place the script at the bottom of the body, leaving the page as early as possible to screen the domcontentloaded event. But because in iOS Safari, Android browser and iOS WebView even if you put the JS script to the end of the body, the result is the same, so here need another operation to the JS file load optimization.

Defer loading

This is a script property defined in HTML4, which is used to indicate that when the rendering engine encounters script, if the script refers to an external resource, it is suspended and loaded. The rendering engine continues parsing the following HTML document, and then executes the script inside the scripts when parsing is complete.

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

His degree of support is <=IE9.
and the order in which he was executed was strictly dependent, namely:

<script src= "Outside1.js" defer></script> <script src= "Outside2.js
" defer></script>

When the page is finished parsing, he begins to execute the Outside1 and Outside2 files in sequence.
If you use defer below the IE9, you may encounter two of them that are not sequential, and here you need a hack to process, which is to add an empty script tag in the middle of two.

<script src= "Outside1.js" defer></script>
<script></script>//hack <script src=
"Outside2.js" defer></script>

Async loading

Async is a new script property defined by H5. He is another kind of JS loading mode.

• Render engine Parse file If script is encountered (with async)
• Continue parsing the remaining files while loading the script's external resources in parallel
• When the script load is complete, the browser pauses parsing the document, handing permissions to the JS engine, and specifying the loaded script.
• After execution, restore the browser resolution script

You can see that async can also solve the problem of blocking loading. However, the execution of the async is performed asynchronously, resulting in inconsistent sequence of execution files. That

<script src= "Outside1.js" async></script> <script src= "Outside2.js
" async></script>

At this time, who first loaded, the first execution. Therefore, a general dependent file should not use async and should use defer.
Defer compatibility is poor, for ie9+, but generally in the mobile end of the use, there is no such problem.

Script asynchronous

Script Asynchrony is the basic load principle used by some asynchronous loading libraries, such as require. Directly on the code:

function Asyncadd (src) {
  var script = document.createelement (' script ');
  SCRIPT.SRC = src;
  Document.head.appendChild (script);
Load JS file
asyncadd ("Test.js");

At this point, the file can be loaded asynchronously, without blocking effect.
However, such a loaded JS file is unordered and cannot load dependent files normally.
At this point, 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);
  }
}) ();
Load file
asyncadd ("First.js");
Asyncadd ("Second.js");
Or simply a little
["First.js", "Second.js"].foreach (src) =>{async (src);});

However, by using a script to load, you need to wait for the CSS file to load before starting loading and not taking full advantage of the concurrent loading of the browser. Using static text to load async or defer does not appear to be the problem.

When you use a script to load asynchronously, you can wait for the CSS to load until it finishes loading
When using static async loading, CSS and JS are loaded together concurrently

About These three kinds of choices, that is mainly to see what leader to our target , is compatible with ie8,9 or mobile phone, or desktop browser, or 22 combination.
But for situations where you use a single skill alone, you need to be aware of tips.

1, JS file placement position should be placed at the end of the body
2, if the use of async, the final plus defer in order to backward compatibility

<script src= "test.js" Async defer></script>//If both are supported, Async will be overridden by default defer
//If only one is supported, then the corresponding can be performed

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

The above is the entire content of this article, I hope to help you learn.