Learn about javascript file loading optimization and javascript file loading

Learn about javascript file loading optimization and javascript file loading

In the js engine section, we can understand that when the rendering engine parses the script tag, it will give control to the JS engine. If the script loads external resources, you must wait until the download is complete. Therefore, here we can perform a lot of optimization work on it.

Placed at the bottom of the BODY

To enable 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 removed from the white screen as soon as possible, that is, the DOMContentLoaded event will be triggered early. however, in IOS Safari, Android browser, and IOS webview, Even if you put the js script at the end of the body, the results are the same. Therefore, you need to perform other operations to optimize js file loading.

DEFER Loading

This is a script Attribute defined in HTML4. It is used to indicate that when a rendering engine encounters a script, if the script references an external resource, it will be temporarily suspended and loaded. The rendering engine continues to parse the following HTML documents. After parsing, the script in the script is executed.

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

His support is <= IE9.
In addition, the execution sequence is strictly dependent, namely:

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

After the page is parsed, The outside1 and outside2 files are executed in sequence.
If you use defer below IE9, you may encounter two of them not executed sequentially. Here you need an hack for processing, that is, adding an empty script tag to 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 of H5. He is another js loading mode.

• If the rendering engine parses a file and encounters a script (with async)
• Continue parsing the remaining files and concurrently loading the external resources of the script
• After the script is loaded, the browser suspends the parsing of the document and gives the permission to the JS engine to specify the loaded script.
• After the script is executed, the browser parsing script is restored.

We can see that async can also solve the problem of blocking loading. However, async is executed asynchronously, resulting in inconsistent execution file sequence. That is:

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

In this case, whoever loads the file first executes the file first. Therefore, defer should be used instead of async for dependent files.
Defer has poor compatibility. It is IE9 +, but it is generally used on mobile terminals, so this problem does not exist.

Asynchronous script

Asynchronous scripts are the basic Loading Principles used by some asynchronous loading libraries (such as require:

Function asyncAdd (src) {var script = document. createElement ('script'); script. src = src; document. head. appendChild (script);} // load the js file asyncAdd ("test. js ");

At this time, files can be asynchronously loaded without blocking.
However, the js files to be loaded are unordered and the dependent files cannot be loaded normally.
At this time, we need to optimize the above functions.

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 the file asyncAdd ("first. js "); asyncAdd (" second. js "); // or a little simpler [" first. js "," second. js "]. forEach (src) =>{ async (src );});

However, if you use a script for One-Step loading, you need to wait until the css file is loaded. This does not take full advantage of the browser's concurrent loading. This problem does not occur when static text is used to load async or defer.

When the script is asynchronously loaded, it can only be loaded after the css is loaded.
When static async is used for loading, css and js are concurrently loaded together.

AboutHow can we choose these three options? What is the goal given by leader?Is compatible with IE8, 9, mobile phone, desktop browser, or a combination of two or two.
However, when using a specific skill, you must note thatTips.

1. Place the js file at the end of the body
2. If async is used, add defer to the end for backward compatibility.

<Script src = "test. js "async defer> </script> // if both are supported, async overwrites defer by default. // if only one is supported, execute the corresponding

Generally, we use defer loading because of the strong dependency.

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• Dynamically load the required js files using ajax
• Three methods for dynamically loading JS files
• Solution to failure to load css and js files in php ci framework
• How to Use jQuery to dynamically load js script files
• Effective Solution for loading JS files in JSP
• How does js determine whether the flash swf file has been loaded?
• After the css is loaded, the system automatically determines whether to add css or js files to the page.
• Jquery dynamic loading of js/css files (self-writing small functions)
• How to debug asynchronous loading of js files contained in a page
• JS obtains the sample code for dynamically loading JS files in the browser Language