Javascript 异步加载详解【转载】

2. 常见异步加载（Script DOM Element）

4.异步加载的其它方法

<div>
  <strong><script> 标签在 HTML 4.01 与 HTML5 的区别：</strong>
</div>

<div>
  <ul>
    <li>
      type 属性在HTML 4中是必须的，在HTML5中是可选的。
    </li>
    <li>
      async 属性是HTML5中新增的。
    </li>
    <li>
      个别属性（xml:space）在HTML5中不支持。
    </li>
  </ul>
</div>

三、延迟加载（lazy loading）

前面解决了异步加载（async loading）问题，再谈谈什么是延迟加载。

延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js，而是在需要的时候或稍后再通过js 的控制来异步加载。

也就是将 js 切分成许多模块，页面初始化时只加载需要立即执行的 js ，然后其它 js 的加载延迟到第一次需要用到的时候再加载。

特别是页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。

就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片。

四、script 的两阶段加载与延迟执行（lazy execution）

JS的加载其实是由两阶段组成：下载内容（download bytes）和执行（parse and execute）。

浏览器在下载完 js 的内容后就会立即对其解析和执行，不管是同步加载还是异步加载。

前面说的异步加载，解决的只是下载阶段的问题，但代码在下载后会立即执行。

而浏览器在解析执行 JS 阶段是阻塞任何操作的，这时的浏览器处于无响应状态。

我们都知道通过网络下载 script 需要明显的时间，但容易忽略了第二阶段，解析和执行也是需要时间的。script的解析和执行所花的时间比我们想象的要多，尤其是script 很多很大的时候。有些是需要立刻执行，而有些则不需要（比如只是在展示某个界面或执行某个操作时才需要）。

这些script 可以延迟执行，先异步下载缓存起来，但不立即执行，而是在第一次需要的时候执行一次。

利用特殊的技巧可以做到下载与执行的分离 (再次感谢 javascript 的动态特性)。比如将 JS 的内容作为 Image或 object 对象加载缓存起来，所以就不会立即执行了，然后在第一次需要的时候再执行。

此部分的更多解释请查看末尾参考资料中 ControlJS 的相关链接。

小技巧：

模拟较长的下载时间：

写个后端脚本，让其 sleep 一定时间。如在 jsp 中 Thread.sleep(5000); ，这样5秒后才能收到内容。

模拟较长的 js 代码执行时间（因为这步一般比较快不容易观察到）：

var t_start = Number(new Date());

while ( t_start + 5000 > Number(new Date()) ) {}

这个代码将使 js 执行5秒才能完成！

RequireJS 、 CommonJS 以及王保平(淘宝)的 SeaJS 及其博客。

七、JS最佳实践：

最小化 js 文件，利用压缩工具将其最小化，同时开启http gzip压缩。工具：
尽量不要放在中，尽量放在页面底部，最好是之前的位置
避免使用 document.write 方法
异步加载 js ，使用非阻塞方式，就是此文内容。
尽量不直接在页面元素上使用 Inline Javascript，如onClick 。有利于统一维护和缓存处理。

参考资料：

Javascript 异步加载详解【转载】

DigDeeply