在 Google 的新视频中，开发者倡导者 Alan Kent 分享了六种优化 JavaScript 以提高网站性能的方法。

Kent 确定了由 JavaScript 引起的常见性能问题，并介绍了您可以采取的修复这些问题的步骤。

1. 避免 JavaScript 文件扩散

避免网站上的 JavaScript 文件数量激增。

如果您不小心，JavaScript 文件的数量可能会变得过多，尤其是当每个 UI 组件都位于单独的文件中时。

减少浏览器必须下载的 JavaScript 文件数量可以提高网站性能。

如何检测

PageSpeed Insights报告的“机会”部分列出了针对您网站的建议。

寻找保持低请求计数和小传输大小的建议。

单击建议以获取请求的资源类型（包括 JavaScript 文件）的数量和大小的摘要。

怎么修

您可以通过多种不同的方式解决此问题。Google 推荐的一种选择是将较小的文件组合在一起，以便下载一个较大的文件。

另一个修复是在您的站点上支持 HTTP2，因为它可以在不加入文件的情况下提高性能。

2. 避免过多的 DNS 查询

避免对参考 JavaScript 文件进行过多的 DNS 查找，因为这会减慢用户首次访问您网站的速度。

如何检测

PageSpeed Insights 可以显示 URL 中使用的域名列表，例如减少 JavaScript 执行时间。

Chrome 开发者工具中的网络标签是查看所有引用的域名的另一种方式。

怎么修

为了减少 DNS 查找次数，Google 建议您考虑在自己的站点上托管外部引用的 JavaScript 文件的副本。

3. 消除低效的 JavaScript

减少或消除低效的 JavaScript，因为它会减慢网页速度并导致糟糕的用户体验。

如何检测

在 Google 的 PageSpeed Insights 报告中寻找以下机会：

• 减少 JavaScript 执行时间：这会报告花费大量 CPU 时间来解析或执行 JavaScript 代码的脚本。
• 消除渲染阻塞资源：这包括可能在页面渲染之前执行的 JavaScript，使用户等待更长的时间才能看到任何内容。
• Document.write：如果使用不当，可能会导致页面出现严重的性能问题，因为它会阻止其他操作的发生。
• 不使用被动侦听器：被动侦听器向浏览器提示 JavaScript 代码不会调用阻止滚动的函数，从而允许浏览器在 JavaScript 仍在执行时滚动页面。

怎么修

消除低效的 JavaScript 是一个更大的话题，超出了 Google 视频的范围。

解决方案通常涉及以不同方式编写 JavaScript 代码。技术包括分析现有代码，以及编写您自己的更强大组件的缩小版本。

4. 消除未使用的 JavaScript

未使用的 JavaScript 也是低效的，但谷歌表示这个问题很常见，可以自己提出来。

跨站点重用代码可能会导致包含不需要的 JavaScript。

从不被调用的 JavaScript 仍然需要被 Web 浏览器下载和解析，这是一种资源浪费。

如何检测

在 Google 的 PageSpeed Insights 报告中寻找以下机会：

• 减少未使用的 JavaScript：这向您显示在加载页面时未执行的 JavaScript。
• 避免巨大的网络负载：通过调用大型库下载来确定需要改进的领域。
• 最小化主线程工作：包括解析、编译和执行 JavaScript 所花费的时间。

怎么修

Google 推荐一种称为 tree-shaking 的技术，可以用来识别从未调用过的 JavaScript，可以安全删除。

5. 压缩 JavaScript 文件

确保您的 JavaScript 文件在下载时已压缩。虽然网络浏览器必须花费更多的 CPU 时间来解压缩文件内容，但谷歌表示压缩是一个整体的胜利。

如何检测

PageSpeed Insights 报告有一个部分突出显示可能受益于压缩的 JavaScript 文件。

单击启用文本压缩将显示建议压缩哪些文件。

怎么修

如果配置正确，大多数 Web 浏览器或内容管理系统都内置了压缩下载的支持。

6. 为 JavaScript 代码设置适当的缓存持续时间

检查您的 JavaScript 文件是否返回了适当的缓存到期时间标头。

这有助于浏览器避免检查其缓存中的 JavaScript 文件是否过期的开销，从而提高性能。

如何检测

在Chrome 开发人员工具的网络选项卡中，您可以检查下载的 JavaScript 文件的 HTTP 响应标头。查找诸如Cache Control之类的标头。

在 PageSpeed Insights 中寻找标题为使用有效缓存策略服务静态资产的机会。单击它会显示一个资源列表，包括 JavaScript 文件，这些资源可能受益于适当设置的缓存标头。

怎么修

增强常用 JavaScript 文件缓存的一种方法是从共享的公共位置引用文件。

如果用户访问重用相同 JavaScript 文件的站点，浏览器可以使用之前下载的文件副本，这将提高性能。