概览

延迟加载JavaScript可以减少网页初始下载体积，并允许其他资源能够并行下载和加速执行以及渲染时间。

说明

像样式表一样，在浏览器开始呈现网页之前脚本必须被下载、解析和执行。即使脚本包含在被高速缓存的外部文件里，脚本后面的所有元素的处理也会被阻止直到浏览器从磁盘加载代码并执行之后。然而，对于一些浏览器，情况比样式更糟：当JavaScript正在处理时，浏览器将会打断所有其他资源的下载。对于使用很多JavaScript代码的AJAX类型的应用程序，会增加相当大的延迟。

对于很多脚本应用程序，大量的JavaScript代码需要处理用户初始化事件，例如鼠标点击和拖动，表单填充和提交，隐藏元素展开，等等，所有这些用户触发的事件都会在页面加载和onload事件被触发后发生。因此，通过推迟JavaScript加载，很多延迟可在“关键时候”（加载主页的启动时间）避免，直到真正需要它的时候。虽然，这种“lazy”的加载方法并没有降低总的JS有效载荷，它可以显著减少加载网页的初始状态所需要的字节数，并允许在后台异步加载剩余的字节。

方法

使用这种技术，你应该先确定所有的onload事件之前未实际使用的文档的JavaScript函数。对于包含超过25个功能没有使用的文件，将所有这些功能，合并为一个单独引用的外部JS文件。这可能需要你根据文件之间的依赖关系进行代码重构。 （对于含有少于25个功能没有使用的文件，它不需要重构。）

然后，在onload事件后，在包含文档的头部插入JavaScript事件侦听器，强制外部文件加载。您可以通过任何常用的脚本手段做到这一点，但我们推荐一个很简单的脚本DOM元素（以避免跨浏览器和同域的政策问题）。

警告：延迟JavaScript通常会显着提高一个网站的渲染速度，但需要仔细评估，以确保该网站继续正常运行。