Analysis of Javascript loading

This article mainly introduces the analysis of Javascript loading, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

1. Browser loading

(1) Synchronous loading

In a web page, the way the browser loads js files is through the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. As shown below:

//内嵌脚本

//加载外部脚本

3f1c4e4b6b16bbbd69b2ee476dc4f83a tag is very convenient. As long as it is added, the browser can read and run it. However, when reading, the browser follows the appearance of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. Sequentially, Javascript files are read and then run immediately. As a result, when multiple files depend on each other, the file with the smallest dependency must be placed at the front and the file with the greatest dependency must be placed at the end. Otherwise, the code will report an error. , I believe everyone has a deep understanding of it when using bootstrap. On the other hand, browsers load the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag in synchronous mode, which means that the page waits for the JavaScript file to be loaded before running the subsequent code. When there are many 3f1c4e4b6b16bbbd69b2ee476dc4f83a tags, the browser cannot read them at the same time. It must read one and then the other, which causes the reading time to be greatly extended, the page response is slow, and the user experience is affected. Synchronous mode, also known as blocking mode, will prevent the browser from subsequent processing and stop subsequent parsing. Only when the current loading is completed can the next operation be performed, so synchronous execution is safe by default. But if there are behaviors such as outputting document content, modifying DOM, redirection, etc. in js, it will cause blocking. Therefore, it is generally recommended to place the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag at the end of 6c04bd5ca3fcae76e30b72ad730ca86d, which can reduce page blocking.

(2) Asynchronous loading

In order to solve this problem, ES5 uses the DOM method to dynamically load JavaScript script files.

function loadScript(url) {    
var script = document.createElement("script");
    script.type="text/javascript";
    script.src=url;
    document.body.appendChild(script);
}

This method creates a new 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag and sets its src attribute to read the javacript file asynchronously

This will not cause page blocking, but there will be another The problem is, if other script files depend on it, there is no guarantee when this script will be loaded.

Another loading method is to use the defer and async attributes to make the script load asynchronously. When the rendering engine encounters this line of command, it will start to download the external script, but will not wait for it to be downloaded and executed, but will directly execute the following commands. The difference between defer and async is: defer will not be executed until the entire page is rendered normally in memory (the DOM structure is completely generated and other scripts are executed); async once the download is completed, the rendering engine will interrupt the rendering and execute this script Later, continue rendering. That is, defer is executed after rendering, and async is executed after downloading. In addition, if there are multiple defer scripts, they will be loaded in the order in which they appear on the page, while multiple async scripts cannot guarantee the loading order.

# EE9 and below have some quite bad errors in the delay implementation, resulting in the order of execution cannot be guaranteed. If you need to support

9a9097c5776e07f54236d5cd1dc435ae2cacc6d41bbb37262a98f745aa00fbf0
27893951ee31aa4ab68c289425ee4a992cacc6d41bbb37262a98f745aa00fbf0

How to choose defer and async. If the script used is a module and does not depend on any other script files, use async; if the script depends on other scripts or is dependent on other scripts, use defer; if the script file is small and is dependent on an async script, use internal Embed script puts this file in front of all async scripts.

Another method is asynchronous loading of the onload event.

(function(){
    if(window.attachEvent) {
        window.attachEvent("load", asyncLoad);
    } else if(window.addEventListener) {
        window.addEventListener("load", asyncLoad);
    } else {        window.onload = asyncLoad;    }  
    var asyncLoad = function() {
        var script = document.createElement("script");
        script.type="text/javascript";
        script.async = true;
        script.src = ('https:'==document.location.protocol ? 'https://ssl' :  'http:www') + '.baidu.com/demo.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(script, s);
    };
)();

This method is to put the method of inserting the script in a function, and then execute it in the onload method of the window. This solves the problem of blocking the triggering of the onload event.

Due to the dynamic nature of Javascript, there are many asynchronous loading methods: XHR Injection, XHR eval, Script In Iframe, document.write("