Non-blocking loading script analysis [all]

Because the browser is single-threaded, the script will block the download of other resources during loading. Although the browser has been improved, it still needs to be improved.
Obviously, the script must be executed in order, but there is no need to download it in order. solution:
1. Embedded JS
Because the page size and cache can bring more benefits, it is better to introduce JS to external files;
In a few cases, such as the homepage and a small number of JS files, it is acceptable.
2. XHR Eval
Use XMLHttpRequest to obtain scripts from the server.
The main drawback is that the scripts obtained through XHR must be deployed in the same domain as the home page.
Copy codeThe Code is as follows:
Ajax. get ("test. js", function (xhr ){
Eval (xhr. responseText );
});

3. XHR Injection
Use XHR to obtain the script and create the script tag.
Similarly, scripts obtained through XHR must be deployed in the same domain as the home page.
Copy codeThe 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 load the page through iframe.
The disadvantage is that iframe has a high overhead. In addition, the browser security mechanism does not allow js in iframe to access the cross-origin parent page, and vice versa.
5. Script DOM Element
JS dynamically creates a script DOM element and sets its src attribute.
Copy codeThe 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 only IE and some new browsers are supported.
Copy codeThe Code is as follows:
<Script defer src = 'test. js'> </script>

7. Document. write Script Tag
Use document. write to write the HTML Tag script to the page.
The disadvantage is that only scripts are loaded in parallel in IE.
Copy codeThe Code is as follows:
Document. write ("<script type = 'text/javascript 'src = 'test. js'> <\/script> ");

One of the differences that has not been widely discussed is the influence on the busy browser status, including the browser status bar, progress bar, Tab icon, and mouse.
When you load multiple scripts that are dependent on each other, you also need a technology that ensures the execution sequence.

Technology	Parallel download	Cross-Origin	ExistScriptTag	Busy indicator	Sequence assurance	Size(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, the Script DOM Element is a good choice. This method applies to all browsers without cross-origin restrictions. It is easy to implement and easy to understand. The only drawback is that the execution sequence of each script cannot be ensured. If you need to load multiple dependent scripts, you should splice these scripts into one to ensure they are executed in the desired order, or use other technologies.
Currently, the following methods are used to maintain the execution sequence during asynchronous loading. Due to space limitations, we will not describe them 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
For more information, see advanced high-performance website construction guide.