无阻赛的脚本(js脚本延迟方法)

js脚本的加载与执行


1、延迟脚本(defer属性) 
带有defer属性的script标签,可以放置在文档的任何位置,在页面解析到该标签时,会开始下载该脚本,但是不会立即执行,直到dom加载完成(onload事件触发前执行)。并且defer属性的script叫脚本的下载,不会阻塞其他进程,这类文件可以和页面中的其他资源并行下载。 
注:defer属性只有IE和FF3.5+支持

2、 动态添加脚本 
通过动态创建script标签引入外部脚本,加载完后立即执行。 
这种技术的特点:无论何时启动下载,文件的下载和执行不会阻塞页面其他进程。(把新建的脚本放在head里面比body要好,以防body还未加载完成) 
但是当有其他脚本依赖于该动态引进的脚本时,必须保证该脚本下载完毕并且准备就绪。FF、chrome等通过script的onload事件监听,而IE通过触发readystatechange事件来监听。 
FF、Chrome

script.onload=function (){
//脚本加载完毕,可以执行依赖该脚本的操作
};

IE浏览器中:

script.onreadystatechange=function (){
if(script.readyState=='loaded' || script.readyState=='complete'){
//脚本加载完毕
}
};

综上,一个通用的方法:

function loadscript(url,callback){
var script=document.createElement('script');
script.src=url;
if(script.onload){
script.onload=function (){
//脚本加载完毕,可以执行依赖该脚本的操作
callback();
};
}else{ //IE
script.onreadystatechange=function (){
if(script.readyState=='loaded' || script.readyState=='complete'){
callback(); //脚本加载完毕
}
};
}
document.getElementsByTagName('head')[0].appendChild(script);
}

多个脚本有依赖关系时,可以

loadscript('f1.js',function (){
loadscript('f2.js',function(){ });
});

3、XMLHttpRequest脚本注入

var xhr = new XMLHttpRequest();
xhr.open("get", "file1.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
var script = document.createElement ("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);

优点:所有主流浏览器都支持 
缺点:请求的js脚本必须和页面处于相同的域(文件无法从CDN下载)。大型的web应用一般不会采用该方法。

4、document.write Script Tag 

使用document.write把HTML标签script写入页面。 
缺点是只有在IE中是并行加载脚本的。 
代码如下:

document.write("<script type='text/javascript' src='test.js'><\/script>");
上一篇:在win7-64bit环境下,boa-constructor 0.6.1 的palette面板中没有控件图标的解决方法


下一篇:阿里云Open API自动化脚本—ECS公网IP转化弹性公网IP