延迟加载JavaScript

在优化页面速度方面，作为一般规则，您应该致力于移除所有网页不需要加载的JavaScript。当您确实需要某个可以用CSS替代的方面（如视觉效果）时，您应该尝试用CSS替换JavaScript帮助您的效果或功能。

延迟加载JavaScript

当延迟加载JavaScript时，您基本上告诉浏览器在网页（DOM）加载完成后加载JavaScript。这允许浏览器首先加载网页最重要的视觉部分，以便可以快速显示首屏内容的初始视图，这可以由您的关键渲染路径定义。以这种方式延迟脚本使页面加载更快，但普通用户甚至没有意识到某些JavaScript是在DOM加载后加载的。您可以对图像做同样的事情，这也是推荐的。

找到初始视图不需要的JavaScript

很多JavaScript，例如用于用户交互或视觉功能的JavaScript，可以在DOM加载后加载并仍然执行其功能。您实际上不需要加载此JavaScript来加载页面的初始视图。但是，您的网页可能会加载一些加载页面初始视图内容所需的JavaScript。

找出您的网页在初始首屏视图中不需要的JavaScript，并将所有JavaScript复制并粘贴到单个JavaScript（.js）文件中。

我应该延迟加载哪些JavaScript文件？

您应该延迟加载所有阻碍渲染的JavaScript文件。要查看哪些文件是阻碍渲染的，您可以通过我们的网站速度测试运行您的网站。

延迟加载JavaScript的推荐方式

最简单且最推荐的方法是使用这个简单的HTML延迟脚本片段来调用JavaScript文件：

<script defer="defer" src="yourscript.js"></script>

将yourscript.js替换为您在上一步中创建的.js文件，并将上述片段放在HTML页脚中。通过在网页上使用上述片段，您告诉浏览器在网页加载完成后加载yourdeferscripts.js文件。

另一种方式

将以下小代码添加到网页底部，就在标签上方，并将yourscript.js替换为您的JavaScript文件：

<script type="text/javascript">function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "yourscript.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload;</script>

测试您的网站

首先在浏览器中访问您的网站，以确保您的网站没有受到延迟加载JavaScript文件的负面影响。当延迟加载JavaScript导致网站功能故障或错误时，您应该立即撤消您的更改。如果一切看起来和功能正常，尝试网站性能测试以检查您网站上的JS文件是否被正确延迟加载。如果您发现任何JavaScript文件列在”移除或替换阻碍渲染的资源”警告下，这意味着这些文件没有被延迟或异步加载。