Methods for concurrent downloading of JavaScript and other resources_javascript techniques

In IE6/7 JavaScript will hinder page rendering in two ways:
The web resources under the script tag will stop requesting and downloading before the script is loaded.
The html elements below the script tag will stop rendering before the script is loaded.

The script tag will hinder downloading under ie6/7 firefox2/3 Safari3 Chrome1 and opera:

Although scripts can be concurrent under ie8, safari4, and chrome2, it still hinders the downloading of other resources:

There are 6 ways to download scripts in parallel with other resources:

1. 2.XHR Injection — Download the script through XHR, then create a script tag and insert it into the document (in the 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 into 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

You can view usage examples of each method through

Cuzillion.

If there are some inline scripts that need to be executed after the external scripts are executed, they need to be synchronized. Called "coupling",

Coupling Asynchronous Scripts This article introduces some methods that can currently be used to implement "coupling".

headjs, enables concurrent downloading of JS (but sequential execution):

http://headjs.com/

Copy code The code 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");