javascript异步加载议案
日期：2014-05-16 浏览次数：20417 次
javascript异步加载方案
javascript延迟加载的解决方案：
1.使用defer标签
<script type="text/javascript" src="load.js" defer></script>
?2.使用XMLHttpRequest对象加载
var xhr = new XMLHttpRequest();
xhr.open("get","load.js",true);
xhr.onreadystatechange=function(){
if(readyState==4){
if(status>=200&&status<300||status==304){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = xhr.responseText;
document.body.appendChild(script);
}
}
}
xhr.send(null);
?
3.使用推荐的无阻塞模式：
function loadScript（url , callback）{
var script = document.createElement("script");
script.type="text/javascript";
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState=="loaded"||script.readyState=="complete"){
script.onreadystatechange=null;
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
script.src = url;
document.getElementsByName("head")[0].appendChild(script);
}
?4.HTML5中可以使用async方式设置异步加载js
?
?
<script type="text/javascript" src="load.js" async="true"></script>
?
?
关于JS异步加载的测试
对IE8和Firefox3.6测试结果：
1.常规的在head里面使用Script标签引用js,不再是堵塞模式加载（也就是说脚本文件不再是一个一个被加载，加载完成一个才开始加载另一个），而是最
大6个JS同时开始加载（并发限制为6个），但是script的执行顺序还是按照Script标签顺序，而且会阻碍页面的呈现。
2.由于1的原因，所以使用document.write("<script>...</script>")(此方式对Firefox无效)的方式和head.append(script)（此方式兼容IE和Firefox）的方式
使用异步加载意义不大
3.但是使用head.append(script)的方式，不会阻碍界面的呈现，但是要注意：
（1）如果对于window.onload事件的触发有所影响：在 IE中，window.onload事件会在页面其它元素被加载完毕之后立即触发（即不必等所有脚本加载完，而
是html页面加载完），而FireFox里的window.onload事件会等待动态添加的那些脚本文件也被加载完毕后才触发。
（2）虽然我们动态加载的script元素是有严格顺序的，但是浏览器可不一定这样认为。在FireFox中，脚本文件会按照它动态加载的script元素的顺序执
行，而IE会根据脚本文件下载完毕的顺序执行。
注意：
1.在IE6和IE7中，常规的在head里面使用Script标签引用js，是堵塞模式加载，也就是说必须加载完一个JS，才能去加载下一个JS
2.在IE6和IE7中，并发限制是2个。也就是即使使用head.append(script)的方式异步加载3个JS，也会等前两个JS加载完成以后才会加载第三个JS。
1.常规的在head里面使用Script标签引用js,不再是堵塞模式加载（也就是说脚本文件不再是一个一个被加载，加载完成一个才开始加载另一个），而是最
大6个JS同时开始加载（并发限制为6个），但是script的执行顺序还是按照Script标签顺序，而且会阻碍页面的呈现。
2.由于1的原因，所以使用document.write("<script>...</script>")(此方式对Firefox无效)的方式和head.append(script)（此方式兼容IE和Firefox）的方式
使用异步加载意义不大
3.但是使用head.append(script)的方式，不会阻碍界面的呈现，但是要注意：
（1）如果对于window.onload事件的触发有所影响：在 IE中，window.onload事件会在页面其它元素被加载完毕之后立即触发（即不必等所有脚本加载完，而
是html页面加载完），而FireFox里的window.onload事件会等待动态添加的那些脚本文件也被加载完毕后才触发。
（2）虽然我们动态加载的script元素是有严格顺序的，但是浏览器可不一定这样认为。在FireFox中，脚本文件会按照它动态加载的script元素的顺序执
行，而IE会根据脚本文件下载完毕的顺序执行。
注意：
1.在IE6和IE7中，常规的在head里面使用Script标签引用js，是堵塞模式加载，也就是说必须加载完一个JS，才能去加载下一个JS
2.在IE6和IE7中，并发限制是2个。也就是即使使用head.append(script)的方式异步加载3个JS，也会等前两个JS加载完成以后才会加载第三个JS。
?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
