网页前端设计

在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查 看各个方法的使用例子。

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

如果有一些内联脚本需要在外部脚本执行后才能执行，那就需要同步(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");  

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)