defer、async属性以及JS异步加载并执行解决方案，web开发工程师

defer测试代码，可将代码复制到本地自己测试，外部脚本src引入，内联脚本直接粘帖

运行以上代码，得出以下结论：

• 外部JS在各个浏览器里运行结果跟定义的执行顺序正常，alert信息会按照 script->defer->onload顺序弹出；

• 内联脚本，如果脚本都是IE9/8/7/6按照定义的顺序弹出信息，其他浏览器则按照 defer->script->onload 顺序弹出信息，表示defer失效。

• 而如果有多个内联defer脚本、在body和head都有分布或者在iframe中也有内联defer脚本，则在IE6中表现一致。

如果想给脚本增加defer属性让其延迟加载的话，最好是外部脚本，内联的defer不仅多数浏览器不支持，而且IE6的表现也不一致。

所以将脚本放在body底部比给脚本增加defer属性让脚本延迟加载更好，就像yslow建议的那样：put style top,put script bottom。

浏览器的在遇到defer和async属性的

1. WEB浏览器创建Document对象，并且开始解析WEB页面，解析HTML元素和它们的文本内容后添加Element对象和Text节点到文档中。这个过程的readystate的属性值是“loading”

2. 当HTML解析器遇到没有async和defer属性的

JS异步加载

---

了解浏览器在遇到async、defer属性的脚本执行顺序，我们可以利用这两个属性来改善JS的阻塞问题，使用这两个属性会有几种可能的情况：

<