Non-blocking loading script analysis [Full]_javascript skills

Since the browser is single-threaded, the script will block the download of other resources when loading; although the browser has been improved now, it still needs to be improved.
Obviously, the scripts must be executed in order, but there is no need to download them in order. Solution:
1. Embedded JS
Usually because page size and caching can bring more benefits, it is better to introduce JS into external files;
In a few cases, such as the homepage and a small amount of JS, it is acceptable.
2. XHR Eval
Get the script from the server side via XMLHttpRequest.
The main drawback is that the script obtained through XHR must be deployed in the same domain as the main page.

Copy code The code is as follows:

Ajax.get("test.js", function ( xhr) {
eval(xhr.responseText);
});

3. XHR Injection
Use XHR to get the script and create script tags.
Similarly, scripts obtained via XHR must be deployed in the same domain as the main page.

Copy code The code is as follows:

Ajax.get('test.js', function ( xhr) {
injectscript(xhr.responseText);
});
function injectscript(scriptText) {
var s = document.createElement('script');
s.text = scriptText;
document.getElementsByTagName('head')[0].appendChild(s);
}

4. Script in Iframe
Put the required script into a page, and then load the page through iframe.
The disadvantage is that the cost of the iframe itself is relatively large, and the browser security mechanism does not allow js in the iframe to access the cross-domain parent page, and vice versa.
5. Script DOM Element
JS dynamically creates a script DOM element and sets its src attribute.

Copy code The code is as follows:

var scriptElem = document.createElement('script');
scriptElem.src = 'http://domain.com/test.js';
document.ge('head')[0].appendChild(scriptElem);

6. Script Defer
Add the defer attribute to the script tag.
The disadvantage is that it is only supported by IE and some new browsers.

Copy code The code is as follows:

7. document.write Script Tag
Use document.write to write the HTML tag script into the page.
The disadvantage is that scripts are loaded in parallel only in IE.

Copy code The code is as follows:

document.write("");

One difference that has not been widely discussed is the impact on the browser’s busy state, including the browser’s status bar, progress bar, tab icon, and mouse.
When you load multiple scripts that have dependencies on each other, you also need a technology that can guarantee the order of execution.

技术	并行下载	可以跨域	存在Script标签	忙碌指示	顺序保证	大小 (bytes)
XHR Eval	IE, FF, Saf, Chr, Op	no	no	Saf, Chr	-	~500
XHR Injection	IE, FF, Saf, Chr, Op	no	yes	Saf, Chr	-	~500
Script in Iframe	IE, FF, Saf, Chr, Op	no	no	IE, FF, Saf, Chr	-	~50
Script DOM Element	IE, FF, Saf, Chr, Op	yes	yes	FF, Saf, Chr	FF, Op	~200
Script Defer	IE, Saf4, Chr2, FF3.1	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~50
document.write Script Tag	IE, Saf4, Chr2, Op	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~100

In most cases, Script DOM Element is a good choice. This method is suitable for all browsers, has no cross-domain restrictions, and is very simple and easy to understand. The only disadvantage is that the execution order of individual scripts cannot be guaranteed. If you need to load multiple scripts with dependencies, you should combine these scripts into one to ensure that they are executed in the required order, or use other techniques.
Currently there are several methods to maintain the execution order during asynchronous loading. Due to space reasons, they will not be described in detail.
Single Script
1, Hardcoded Callback
2, Window Onload
3, Timer
4, Script Onload
5, Degrading Script Tags
Multiple Scripts
1 , Managed XHR
2. DOM Element and Doc Write
This article refers to the "Advanced Guide to High-Performance Website Construction"