高效加载第三方 JavaScript

Milica Mihajlija

如果某个第三方脚本降低了网页加载速度，您可以通过以下两种方式提高性能：

• 如果它不能给您的网站带来显而易见的价值，请将其移除。
• 优化加载过程。

本文介绍如何使用以下技巧优化第三方脚本的加载过程：

• 对 <script> 标记使用 async 或 defer 属性
• 建立与所需源的早期连接
• 延迟加载
• 优化第三方脚本的提取方式

使用 async 或 defer

由于同步脚本会延迟 DOM 的构建和呈现，因此您应始终异步加载第三方脚本，除非必须在网页呈现之前运行这些脚本。

async 和 defer 属性会告知浏览器，它可以在后台加载脚本时继续解析 HTML，然后在脚本加载后执行该脚本。这样，脚本下载不会阻止 DOM 构建或页面呈现，让用户可以在所有脚本都加载完毕之前看到页面。

<script async src="script.js">

<script defer src="script.js">

async 和 defer 属性之间的区别在于浏览器执行脚本的时间。

async

具有 async 属性的脚本会在下载完成后且窗口 load 事件之前第一次执行。这意味着，async 脚本可能不会按其在 HTML 中的显示顺序运行。这也意味着，如果这些窗口在解析器仍在工作时完成下载，则可能会中断 DOM 构建。

包含 async 的脚本仍可能会阻止 HTML 解析。

defer

具有 defer 属性的脚本会在 HTML 解析完全完成后、DOMContentLoaded 事件之前执行。defer 可以确保脚本按其在 HTML 中显示的顺序运行，并且不会阻止解析器。

带有 defer 的脚本会等到浏览器完成 HTML 解析后再运行。

• 如果必须在加载过程的较早阶段运行该脚本，请使用 async。
• 将 defer 用于不太重要的资源，例如非首屏的视频播放器。

使用这些属性可以显著加快网页加载速度。例如，《电讯报》推迟了其所有脚本（包括广告和分析脚本），并将广告加载时间平均缩短了 4 秒。

注意 ：分析脚本通常会提前加载，因此您不会错过任何有价值的分析数据。幸运的是，有一些延迟初始化分析的模式，同时保留了早期的网页加载数据。

尽早建立与必需源的连接

通过尽早与重要的第三方来源建立连接，您可以节省 100-500 毫秒的时间。

preconnect 和 dns-prefetch 是两种 <link> 类型，可以在这方面为您提供帮助：

preconnect

<link rel="preconnect"> 告知浏览器您的网页想要与另一个源站建立连接，并希望尽快启动该流程。当浏览器从预连接的来源请求资源时，下载会立即开始。

<link rel="preconnect" href="https://cdn.example.com">

注意 ：由于浏览器会在 10 秒内关闭所有未使用的连接，因此相应网页很快将仅预连接到关键网域。不必要的预连接可能会延迟其他重要资源，因此请限制预连接网域的数量并测试预连接的影响。

dns-prefetch

<link rel="dns-prefetch> 负责处理 <link rel="preconnect"> 所处理的一小部分。建立连接涉及 DNS 查询和 TCP 握手，对于安全来源，还涉及 TLS 协商。dns-prefetch 用于告知浏览器仅在明确调用特定网域的 DNS 之前先解析该网域。

preconnect 提示最适合仅用于最重要的连接。对于不太重要的第三方网域，请使用 <link rel=dns-prefetch>。

<link rel="dns-prefetch" href="http://example.com">

浏览器对 dns-prefetch 的支持与对 preconnect 的支持略有不同，因此 dns-prefetch 可以作为不支持 preconnect 的浏览器的后备方案。请使用单独的链接标记安全地实现此操作：

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

延迟加载第三方资源

如果嵌入的第三方资源构建不当，可能会显著降低网页加载速度。如果它们不重要，或者位于非首屏位置（也就是说，如果用户必须滚动屏幕才能看到它们），那么延迟加载是提高网页速度和渲染指标的好方法。这样，用户可以更快地获取主页内容，并获得更好的体验。

延迟加载非首屏内容。

一种有效的方法是在主页面内容加载完毕后延迟加载第三方内容。Google Ads 非常适合使用此方法。

广告是许多网站的重要收入来源，但用户是为了获取内容而来。通过延迟加载广告并更快地提交主要内容，您可以提高广告的总体可见度百分比。例如，MediaVine 改用延迟加载广告后，网页加载速度提高了 200%。Google Ad Manager 提供了有关如何延迟加载广告的文档。

您还可以将第三方内容设置为仅在用户首次滚动到页面的该部分时加载。

Intersection Observer 是一种浏览器 API，可高效检测元素何时进入或退出浏览器的视口，您可以使用它来实现此技术。lazysizes 是一个用于延迟加载图片和 iframes 的热门 JavaScript 库。它支持 YouTube 嵌入内容和微件。它还可选支持 Intersection Observer。

注意 ：在使用 JavaScript 延迟加载资源时，请务必小心谨慎。如果 JavaScript 加载失败（可能是因为网络条件不稳定），您的资源根本不会加载。

使用为延迟加载图片和 iframe 使用 loading 属性是 JavaScript 技术的绝佳替代方案，Chrome 76 最近已推出该属性！

优化第三方脚本的提取方式

以下是优化第三方脚本使用的一些建议策略。

第三方 CDN 托管

第三方供应商通常会提供其托管的 JavaScript 文件的网址，这些文件通常托管在内容分发网络 (CDN) 上。这种方法的好处在于，您可以快速上手（只需复制并粘贴网址即可），并且无需维护开销。第三方供应商负责处理服务器配置和脚本更新。

但是，由于这些文件与您的其他资源不在同一来源，因此从公共 CDN 加载文件会产生网络费用。浏览器需要执行 DNS 查找、建立新的 HTTP 连接，并在安全来源上与供应商的服务器执行 SSL 握手。

使用第三方服务器中的文件时，您很少能控制缓存。依赖于他人的缓存策略可能会导致过于频繁地从网络中不必要地重新提取脚本。

自行托管的第三方脚本

自行托管第三方脚本是一种选项，可让您更好地控制脚本的加载过程。通过自助托管，您可以：

• 减少 DNS 查找和往返时间。
• 改进了 HTTP 缓存标头。
• 利用 HTTP/2 或更新的 HTTP/3。

例如，Casper 通过自行托管 A/B 测试脚本，成功地将加载时间缩短了 1.7 秒。

不过，自行托管有一个很大的缺点：脚本可能会过时，并且在 API 更改或安全修复程序时无法自动更新。

注意：手动更新脚本可能会给开发流程增加大量开销，并且您可能会错过重要的更新。如果您未使用 CDN 托管服务来提供所有第三方资源，则也无法使用边缘缓存，并且必须优化服务器的压缩功能。

使用 Service Worker 来缓存来自第三方服务器的脚本

您可以使用服务工件缓存来自第三方服务器的脚本，作为自行托管的替代方案。这样，您就可以更好地控制缓存，同时保留第三方 CDN 的优势。

您可以控制从网络重新提取脚本的频率，并创建一个加载策略，以限制对非必需第三方资源的请求，直到用户到达网页上的关键互动点。借助 preconnect，您可以尽早建立连接，还有助于降低网络费用。