JavaScript 并发下载

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

在 ie6/7 firefox2/3 Safari3 Chrome1 和 opera 下 script 标签会阻碍下载:

image

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

image

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

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

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

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

headjs,能使 JS 并发下载(但是顺序执行):http://headjs.com/

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {  
  // all done  
});  
  
// the most simple case. load and execute single script without blocking.  
head.js("/path/to/file.js");  
  
// load a script and execute a function after it has been loaded  
head.js("/path/to/file.js", function() {  
  
});  
  
// load files in parallel but execute them in sequence  
head.js("file1.js", "file2.js", ... "fileN.js");  
  
// execute function after all scripts have been loaded  
head.js("file1.js", "file2.js", function() {  
  
});  
  
// files are loaded in parallel and executed in order they arrive  
head.js("file1.js");  
head.js("file2.js");  
head.js("file3.js");  
  
// the previous can also be written as  
head.js("file1.js").js("file1.js").js("file3.js");  

文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接 《四火的唠叨》

10,145 次阅读

2 thoughts on “JavaScript 并发下载

发表评论

电子邮件地址不会被公开。

back to top