Here we only discuss the browsing scenarios that support concurrent downloads, which are roughly divided into two categories, one in the order added to the DOM tree and one in the order in which they are downloaded; So if there is a dependency between the JS files, and is executed in the order of download, And in the absence of caching will be an error (usually the first execution will be an error, HTTP return state 200, if the cache is not disabled, HTTP status is 304, it will not be an error)
and IE is in order to complete the HTTP download sequence of JS code, first look at the following code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>Model</title>
<meta http-equiv= "Content-language" content= "ZH-CN"/>
<body>
<div id= "Page" >
</div><!--Page end! -->
<script type= "Text/javascript" >
<! [cdata[
var js = document.createelement (' script ');
Js.type = ' Text/javascript ';
JS.SRC = ' alert.js ';
if (js.readystate) {
Js.onreadystatechange = function () {
if (js.readystate = = "Loaded" | | | js.readystate = = "complete") {
alert (js.readystate);
document.getElementsByTagName (' head ') [0].appendchild (JS);
}
};
}else{
document.getElementsByTagName (' head ') [0].appendchild (JS);
Js.onload = function () {
Alert (' Loaded not in ie! ');
};
}
]]>
</script>
</body>
The contents of the dynamically loaded Alert.js file are: Alert (' in Alert.js ');
After testing (IE8), you can find that pop-up content is: loaded, in Alert.js, complete
The data can be found under IE to add script to the DOM there are onreadystatechange events (other browsers have the OnLoad event), and events in the Js.readystate state change is: loading (download), Loaded (download complete), Complete (Code execution complete)
I can see from the code that I was adding the scrip node created to the DOM in the event ...
Therefore, it can be concluded that IE in the creation of scrip node and the SRC assignment began to have HTTP download, this is completely different from other browsers (other browsers are going to add the script node to the DOM to have HTTP downloads), and the Scrip node is added to the DOM tree before it starts executing code.
With these conclusions, we can solve the problem of concurrent download sequence execution in IE, there are two kinds of schemes: one is the side download side sequence execution, the other is full download and then sequential execution.
Two kinds of benefits, here's the code for the latter case (Loader.js):
Copy Code code as follows:
/*
* Author:jaiho
*/
(function (window) {
var Domloader = (function () {
var domloader = function () {
return new DOMLoader.prototype.init ();
};
Domloader.prototype = {
Jslist:[], js_all:0, loaded_js:0,
Head:document.getElementsByTagName (' head ') [0],
Init:function () {},
Create_node:function (SRC) {
var js = document.createelement (' script ');
Js.type = ' Text/javascript ';
This.bindwait (JS);
This.jslist[this.jslist.length] = JS;
JS.SRC = src;
},
Loadjs:function (list) {
len = list.length;
for (var i=0; i<len; i++) {
if (i==len-1)
This.js_all = Len;
This.create_node (List[i]);
}
return this;
},
Bindwait:function (JS) {
if (Arguments.callee.caller!==this.create_node) return;
var that = this;
if (js.readystate) {
Js.onreadystatechange = function () {
if (js.readystate = = ' loaded ') {
that.loaded_js++;
if (That.js_all = = That.loaded_js) {
That.head.appendChild (That.jsList.shift ());
}
}
if (js.readystate = = "complete") {
Js.onreadystatechange = null;
if (that.jsList.length) {
That.head.appendChild (That.jsList.shift ());
}
}
};
}else{
Js.onload = function () {
Alert (' Not in ie! ');
};
}
return this;
}
};
DOMLoader.prototype.init.prototype = Domloader.prototype;
return window. Domloader = Domloader;
})();
}) (window);
The test examples are as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<m ETA http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>Loader</title>
<meta http-equiv=" Content-language "content=" Zh-cn "/>
<style type= text/css" media= "All" >
</style>
<body>
<div>
</div>
<script type= "Text/javascript" src= "loader.js" ></script>
<s Cript type= "Text/javascript" >
//<![ cdata[
Window.onload = function () {
var loader = Domloader ();
Loader.loadjs ([' json.js ', ' jquery-1.5.min.js ', ' test.js ']);
};
//]] >
</script>
</body>
You can see that the loaded 3 JS files are downloaded in parallel.
For other browsers have dynamic loading JS file in parallel download and sequential implementation of the situation, there is no relatively perfect solution (if any, please advise.) From this aspect, the individual thinks IE this onreadystatechange event scheme is relatively better.
