In IE6/7, JavaScript will hinder the page rendering from two aspects:
The web page resources under the script tag will stop requesting and downloading before script is loaded.
The html element under the script tag will stop rendering before the script is loaded.
In ie6/7 firefox2/3 Safari3 Chrome1 and Opera, script tags will hinder downloading:
Although script can be concurrent under ie8, safari4, and chrome2, it still hinders the download of other resources:
There are 6 ways to download script in parallel with other resources:
1.XHR eval - Download script through XHR (XMLHttpRequest object), and then use the eval method to execute XHR's responseText
2.XHR Injection - Download script through XHR, then create a script tag and insert it into the document (body or head tag), and then set the text attribute of the script tag to the value of XHR's responseText
3.XHR in Iframe - Put the script tag in an iframe and download it through the iframe
4.Script DOM Element - Create a script tag and point its src attribute to your script address
5.Script Defer - Add the defer attribute of the script tag. This is only valid in ie, but firefox3.1 also supports this attribute.
6. Use the document.write method to write <script src=""> in the page, this is only valid in ie.
You can view the usage examples of each method through Cuzillion.
If there are some inline scripts that need to be executed after external scripts are executed, they need to be synchronized. Called "coupling", Coupling Asynchronous Scripts This article introduces some methods that can currently implement "coupling".
headjs, can enable JS to download concurrently (but execute sequentially): http://headjs.com/
The code copy is as follows:
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
// all done
});
// the most simple case. load and execute single script without blocking.
head.js("/path/to/file.js");
// load a script and execute a function after it has been loaded
head.js("/path/to/file.js", function() {
});
// load files in parallel but execute them in sequence
head.js("file1.js", "file2.js", ... "fileN.js");
// execute function after all scripts have been loaded
head.js("file1.js", "file2.js", function() {
});
// files are loaded in parallel and executed in order they arrive
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");
// the previous can also be written as
head.js("file1.js").js("file1.js").js("file3.js");