Here we only discuss the browsing situation that supports parallel downloading, which can be roughly divided into two types. One is executed in the order of adding to the DOM tree, and the other is executed in the order of download completion; in this way, if there are dependencies between js files , and is executed in the order of downloading, and an error will be reported if there is no cache (usually an error will be reported for the first execution, and http returns status 200. If the cache is not disabled and the http status is 304, no error will be reported. )
And IE executes the js code in the order in which the http download is completed. First look at the following code:
The content of the dynamically loaded alert.js file is: alert('in alert.js');
After testing (ie8), it can be found that the pop-up content is: loaded, in alert.js, complete
Check the information and you can find that there is an onreadystatechange event when adding script to the DOM under IE (other browsers have onload events) , and the status changes of js.readyState in the event are: loading (downloading), loaded (download completed), complete (code execution completed)
It can be seen from the code that I added creation to the DOM in the event The scrip node...
Therefore, it can be concluded that IE starts http downloading when it creates the scrip node and assigns a value to src. This is completely different from other browsers (other browsers need to add the script node There will be http downloads only after entering the DOM), and the code execution will only start after adding the scrip node to the DOM tree.
With these conclusions, we can solve the problem of sequential execution of parallel downloads under IE; there are two solutions: one is to download and execute sequentially, and the other is to download completely and then execute sequentially.
Both methods have their own advantages. Here is the code for the latter case (loader.js):
/*
* 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; iif( 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 example is as follows:

可以看出加载的3个js文件是并行下载的。
对于其它浏览器有动态加载js文件的并行下载和顺序执行问题的情况,目前还没有相对完美的解决方案(如果有了请指教一下。。),单从这个方面,个人觉得ie的这个onreadystatechange事件方案相对好些。