有没有发现,很多网站加载前都有一段时间是空白的,(或加了一个加载的gif动画)。
自己也知道是一些资源的加载问题,今天就这问题,对javascript的加载方式进行一些总结(个人观点,有错勿喷,欢迎纠正!)
浏览器默认的加载方式是同步的(即阻塞式),如:
<span style="font-size:18px;"><script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script></span>
它是先依次加载3个js文件后,在加载body里的内容,如果js较多,期间就会有一段时间白屏。
解决方法:
1.js文件放在</body>前(都懂的)
2.加上defer属性. (效果与1.相同)如:
<span style="font-size:18px;"><script src="a.js" defer="defer"></script> </span>
3.加上async属性
<span style="font-size:18px;"><script src="a.js" async ="async"></script>
<script src="b.js" async ="async"></script></span>
<span style="font-size:18px;"><script src="c.js" async ="async"></script></span>
这个方法实现了异步加载,但有问题。3个js与后面body里的内容同时加载,但其加载顺序不保证,(如果b依赖a,就可能出错)。一般用于独立的js(如广告)。
4.动态创建script(既保证了异步,又能解决顺序问题)
<span style="font-size:18px;">function loadScript(url, callback){
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
};</span>
注:以上代码参考自一个自己感觉比较好的blog:http://www.jb51.net/article/34491.htm
5.Labjs库(http://labjs.com/)
<span style="font-size:18px;">例1:
$LAB.script("script1.js")
.script("script2.js")
.script("script3.js")
.wait(function(){ // 等待所有script加载完再执行这个代码块
script1Func();
script2Func();
script3Func();
});</span>
<span style="font-size:18px;"> 例2:
$LAB.script("script1.js","script2.js","script3.js")
.wait(function(){ // 等待所有script加载完再执行这个代码块
script1Func();
script2Func();
script3Func();
});</span></span>
<span style="font-size:18px;"> 例3:
$LAB.script("script1.js")
.wait() // 空的wait()只是确保script1在其他代码之前被执行
.script("script2.js") // script2 和 script3 依赖于 script1
.script("script3.js")
.wait() // 但是script2 和 script3 并不互相依赖,可以并行下载
.script("script4.js")
//script4 依赖于 script1, script2 及 script3 .wait(function(){script4Func();});</span>
推荐方法4和5
当然还有很多方法(如:XHR Eval 、XHR Injection 、Script in Iframe ),这里不一一列举了。
个人观点,欢迎补充、纠正^_^!