Javascript 异步加载详解

一、同步加载与异步加载的形式

1. 同步加载我们平时最常使用的就是这种同步加载形式：

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。  js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。 以前的一般建议是把

详见参考资料中2010年的Velocity 大会 Steve Souders 和淘宝的那两个讲义。二、async 和 defer 属性1. defer 属性

defer属性声明这个脚本中将不会有 document.write 或 dom 修改。 浏览器将会并行下载 file.js 和其它有 defer 属性的script，而不会阻塞页面后续处理。 defer属性在IE 4.0中就实现了，超过13年了！Firefox 从 3.5 开始支持defer属性 。 注：所有的defer 脚本保证是按顺序依次执行的。2. async 属性

async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。 Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有 IE 都支持异步加载。3. 详细解释   

• 阻止了后续的下载；

• 在IE 6-7 中 script 是顺序下载的，而不是现在的 “并行下载、顺序执行” 的方式；

• 在下载和解析执行阶段阻止渲染（rendering）；

2. script 放在页面底部（2007）

... 
  
 

• 不阻止其它下载；

• 在IE 6-7 中 script 是顺序下载的；

• 在下载和解析执行阶段阻止渲染（rendering）；

3. 异步加载script（2009）

var se = document.createElement ('script'); 
 se.src = 'http://anydomain.com/A.js'; 
 document.getElementsByTagName('head') 
 [0].appendChild(se);

这就是本文主要说的方式。

• 不阻止其它下载；

• 在所有浏览器中，script都是并行下载；

• 只在解析执行阶段阻止渲染（rendering）；

4. 异步下载 + 按需执行 (2010)

var se = new Image(); 
 se.onload = registerScript(); 
 se.src = 'http://anydomain.com/A.js'; 把下载 js 与 解析执行 js 分离出来

• 不阻止其它下载；

• 在所有浏览器中，script都是并行下载；

• 不阻止渲染（rendering）直到真正需要时；

六、异步加载的问题在异步加载的时候，无法使用 document.write 输出文档内容。 在同步模式下，document.write 是在当前 script 所在的位置输 出文档的。而在异步模式下，浏览器继续处理后续页面内容，根本无法确定 document.write 应该输出到什么位置，所以异步模式下 document.write 不可行。而到了页面已经 onload 之后，再执行 document.write 将导致当前页面的内容被清空，因为它会自动触发 document.open 方法。 实际上document.write的名声并不好，最好少用。 替代方法： 1. 虽然异步加载不能用 document.write，但还是可以onload之后执行操作dom（创建dom或修改dom）的，这样可以实现一些自己的动态输出。比如要在页面异步创建一个浮动元素，这和它在页面中的位置就没关系了，只要创建出该dom元素添加到 document 中即可。 2. 如果需要在固定位置异步生成元素的内容，那么可以在该固定位置设置一个dom元素作为目标，这样就知道位置了，异步加载之后就可以对这个元素进行修改。六、JS 模块化管理异步加载，需要将所有 js 内容按模块化的方式来切分组织，其中就存在依赖关系，而异步加载不保证执行顺序。 另外，namespace 如何管理 等相关问题。这部分已超出本文内容，可参考： RequireJS 、 CommonJS 以及
王保平(淘宝)的 SeaJS 及其博客 。七、JS最佳实践：1. 最小化 js 文件，利用压缩工具将其最小化，同时开启http gzip压缩。工具： 2. 尽量不要放在 中，尽量放在页面底部，最好是之前的位置 3. 避免使用 document.write 方法 4. 异步加载 js ，使用非阻塞方式，就是此文内容。 5. 尽量不直接在页面元素上使用 Inline Javascript，如onClick 。有利于统一维护和缓存处理。参考资料：Lazy Loading Asyncronous Javascript Load Non-blocking JavaScript with HTML5 Async and Defer 2010年 Velocity China 上的两个讲义： Steve Souders(Google)的 Even Faster Web Sites (pdf) 李穆(淘宝)的 第三方广告代码稳定性和性能优化实战 (pdf)转自：http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html