文章详细
JavaScript并发下载
 2012/5/9 21:07:43 评论:0人 阅读次数:6656

 

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

 

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



 

 

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



 

 

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

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

 

Technique 方法 Parallel Downloads 是否并行下载 Domains can Differ 可否跨域 Existing Scripts 是否需要更改现有脚本 Busy Indicators是否出现示忙器 Ensures Order 是否确保顺序 Size (bytes)

XHR Eval IE, FF, Saf, Chr, Op no no Saf, Chr - ~500
XHR Injection IE, FF, Saf, Chr, Op no yes Saf, Chr - ~500
Script in Iframe IE, FF, Saf, Chr, Op no no IE, FF, Saf, Chr - ~50
Script DOM Element IE, FF, Saf, Chr, Op yes yes FF, Saf, Chr FF, Op ~200
Script Defer IE, Saf4, Chr2, FF3.1 yes yes IE, FF, Saf, Chr, Op IE, FF, Saf, Chr, Op ~50
document.write Script Tag IE, Saf4, Chr2, Op yes yes IE, FF, Saf, Chr, Op IE, FF, Saf, Chr, Op ~100

 

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

 

 

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

 

  1. head.js("/path/to/jquery.js""/google/analytics.js""/js/site.js"function() {  
  2.   // all done  
  3. });  
  4.   
  5. // the most simple case. load and execute single script without blocking.  
  6. head.js("/path/to/file.js");  
  7.   
  8. // load a script and execute a function after it has been loaded  
  9. head.js("/path/to/file.js"function() {  
  10.   
  11. });  
  12.   
  13. // load files in parallel but execute them in sequence  
  14. head.js("file1.js""file2.js", ... "fileN.js");  
  15.   
  16. // execute function after all scripts have been loaded  
  17. head.js("file1.js""file2.js"function() {  
  18.   
  19. });  
  20.   
  21. // files are loaded in parallel and executed in order they arrive  
  22. head.js("file1.js");  
  23. head.js("file2.js");  
  24. head.js("file3.js");  
  25.   
  26. // the previous can also be written as  
  27. head.js("file1.js").js("file1.js").js("file3.js");  
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=342【JavaScript并发下载】幸凡学习网
0
 
相关文章
推荐文章
Created By Charry-May 3,2010
粤ICP备10093478号-1
顶部