高效加载第三方 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 构建，前提是它们 在解析器仍在运行的同时完成下载。

<ph type="x-smartling-placeholder">

</ph>

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

defer

具有 defer 属性的脚本会在 HTML 解析完成后执行 结束之后， DOMContentLoaded 事件。defer 可以确保脚本按照它们在 HTML 中出现的顺序运行， 因此不会阻止解析器

<ph type="x-smartling-placeholder">

</ph>

包含 defer 的脚本将等到 浏览器完成 HTML 的解析。

• 如果有必要在加载过程中提前运行脚本，请使用 async 过程。
• 将 defer 用于不太重要的资源，例如以下版本的视频播放器 。

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

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

建立与所需源的早期连接

相较于 Google Analytics 4 媒体资源， 建立早期连接 重要的第三方来源

两种 <link> 类型， preconnect和dns-prefetch，可以在这里提供帮助：

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">

延迟加载第三方资源

如果存在以下情况，嵌入的第三方资源可能会显著降低网页加载速度： 它们的结构糟糕。不是很关键，或者位于非首屏位置 （也就是说，如果用户必须滚动屏幕才能看到它们），那么延迟加载是 提高网页速度和渲染指标这样，用户就能在浏览首页时 获得更好的体验

<ph type="x-smartling-placeholder">

</ph>

延迟加载非首屏内容。

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

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

您还可以将第三方内容设置为仅在用户首次滚动到 网页上的该部分

Intersection Observer 是一种浏览器 API，可高效检测元素何时进入或退出 并且您可以使用它来实施此技术。 lazysizes 是一个流行的 JavaScript 库 （适用于延迟加载图片）和 iframes。 它支持 YouTube 嵌入， widgets 的基础。 还提供可选支持 Intersection Observer

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

针对延迟加载图片和 iframe 使用 loading 属性 是 JavaScript 技术的绝佳替代方法， 已在 Chrome 76 中推出！

优化第三方脚本的投放方式

下面是一些推荐策略，可帮助您 第三方脚本

第三方 CDN 托管

第三方供应商通常会为他们提供的 JavaScript 文件提供网址， 主机通常位于内容分发网络 (CDN) 上。 这种方法的优势在于，您只需快速上手 复制和粘贴网址，无任何维护开销。通过 由第三方供应商处理服务器配置和脚本更新。

但由于它们与您的其余资源不在同一源上， 从公共 CDN 加载文件会产生网络成本。浏览器需要 执行 DNS 查找、建立新的 HTTP 连接，以及在安全源上 与供应商服务器进行 SSL 握手。

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

自行托管的第三方脚本

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

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

例如，Casper 成功缩短了 1.7 秒。 以减少加载时间。

不过，自助托管有一个很大的缺点：脚本可能会过期， 在进行 API 更改或进行安全修复时不会自动更新。

注意 ：手动更新脚本可能会大幅增加开发开销 您可能会错过重要更新如果您未使用 CDN 托管以提供您的所有第三方资源，您也错失了 边缘缓存 而且您必须优化服务器的压缩效果。

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

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

您可以控制从网络重新提取脚本的频率， 制定一个加载策略，限制对非必需品的 第三方资源，直到用户到达网页上进行关键互动为止。 借助 preconnect，您可以尽早建立联系，并提供帮助 从而降低网络费用