JavaScript 并发下载

在 IE6/7 里 JavaScript 会从两个方面阻碍页面呈现：

script 标签下面的网页资源在 script 加载完之前会停止请求、下载。

script 标签下面的 html 元素在 script 加载完之前会停止渲染。

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

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

有 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");  

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

×Scan to share with WeChat