提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

让JavaScript和其它资源并发下载的方法

JavaScript资源方法并发下载 其它
2023-06-13 09:15:29 时间

在IE6/7里JavaScript会从两个方面阻碍页面呈现：
script标签下面的网页资源在script加载完之前会停止请求、下载。
script标签下面的html元素在script加载完之前会停止渲染。

在ie6/7firefox2/3Safari3Chrome1和opera下script标签会阻碍下载：

虽然在ie8，safari4，chrome2下script可以并发，但依然阻碍了其他资源的下载：

有6种方法可以使script与其他资源并行下载：

1.XHReval—通过XHR(XMLHttpRequest对象)下载script，然后用eval方法执行XHR的responseText
2.XHRInjection—通过XHR下载script，然后建立一个script标签并把它插入文档中(body或者head标签内),接着把script标签的text属性设置为XHR的responseText的值
3.XHRinIframe—把script标签放到一个iframe里，通过iframe下载它
4.ScriptDOMElement—创建script标签并把它的src属性指向你的脚本地址
5.ScriptDefer—添加script标签的defer属性，这个只在ie中有效，但firefox3.1也支持这个属性了
6.使用document.write方法在页面中写入<scriptsrc="">,这个只在ie里有效

可以通过Cuzillion查看各个方法的使用例子。

如果有一些内联脚本需要在外部脚本执行后才能执行，那就需要同步(synchronize)他们了。称作”coupling”，CouplingAsynchronousScripts这篇文章介绍了一些目前可以实现“coupling”的方法。

headjs，能使JS并发下载（但是顺序执行）：http://headjs.com/

复制代码代码如下:


head.js("/path/to/jquery.js","/google/analytics.js","/js/site.js",function(){ 
 //alldone 
}); 
  
//themostsimplecase.loadandexecutesinglescriptwithoutblocking. 
head.js("/path/to/file.js"); 
  
//loadascriptandexecuteafunctionafterithasbeenloaded 
head.js("/path/to/file.js",function(){ 
  
}); 
  
//loadfilesinparallelbutexecutetheminsequence 
head.js("file1.js","file2.js",..."fileN.js"); 
  
//executefunctionafterallscriptshavebeenloaded 
head.js("file1.js","file2.js",function(){ 
  
}); 
  
//filesareloadedinparallelandexecutedinordertheyarrive 
head.js("file1.js"); 
head.js("file2.js"); 
head.js("file3.js"); 
  
//thepreviouscanalsobewrittenas 
head.js("file1.js").js("file1.js").js("file3.js");

相关文章