Javascript 异步加载详解(浏览器在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)