异步加载JS脚本

《异步加载JS脚本》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、异步加载JS脚本　　　　JavaScript脚本对现代网站来说是必不可少的。当用户访问站点，需要下载各种资源，例如JS脚本，CSS，图片，iframe等。　　浏览器下载除JS外的资源时，会并行下载，以提高性能。但下载JS脚本时，会禁止并行下载(称为脚本阻塞ScriptsBlockDownloads)。浏览器遇到JS时，必须等JS下载，解析，执行完后，才能继续并行下载下一个资源。原因是JS可能会改变页面或改变JS间的依赖关系，例如A.js中用document.write改变页面，B.js依赖于A.js。因此要严格保证顺序

2、，不能并行下载。因此不推荐将JS放到标签里，你可以点击例子页面试一下。浏览器遇到　　这属于静态脚本元素，浏览器执行到这里发现script元素，会按上面所说的，下载解析执行脚本，同时阻塞其他资源文件的下载。而动态脚本元素如下：varscript=document.createElement('script');//创建script标签script.

5、type="text/javascript";script.src="A.js";document.getElementsByTagName('head')[0].appendChild(script);//塞进页面　　先用document.createElement(‘script’)生成一个script标签，再设置它的src属性，最后将其插入到中。　　script标签被插入到页面的DOM树后，就会开始下载src属性指定的脚本。而且通过动态脚本元素下载脚本是异步的，不会阻塞页面的其他下载和处理过程，因此script标

6、签插入中也没问题。　　当JS下载完毕后，就会立即执行。如果多个JS间有依赖关系，一下载完马上执行可能会出现error。因此通常来说你应该将有依赖关系的JS合并成一个文件，虽然合并后JS文件会变大，但由于是异步下载，你几乎不会有什么损失。　　如果实在不方便将有依赖关系的文件合并。你需要自己指定先后顺序，通过监听load事件(IE是onreadystatechange)来确保依次加载脚本：functionloadScript(url,callback){varscript=document.createElement("s

7、cript")script.type="text/javascript";if(script.readyState){//IEscript.onreadystatechange=function(){if(script.readyState=="loaded"

8、

9、script.readyState=="complete"){script.onreadystatechange=null;callback();}};}else{//Othersscript.onload=function(){callback();};}s

10、cript.src=url;document.getElementsByTagName("head")[0].appendChild(script);}//严格确保A->B->C，依次下载脚本文件loadScript("A-delay.js",function(){loadScript("B-delay.js",function(