javascript延迟加载的解决方案:
1.使用defer标签
- <span?style="font-size:?small;"><script?type="text/javascript"?src="load.js"?defer></script></span>??
?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。
?
?