优化第三方 JavaScript

Milica Mihajlija
Milica Mihajlija
X GitHub 首页

第三方脚本会影响性能，因此请务必定期审核这些脚本并使用高效的加载方法。此 Codelab 介绍了如何优化第三方资源的加载。它涵盖以下方法：

  • 延迟脚本加载

  • 延迟加载非关键资源

  • 预先连接到必需的源

随附的示例应用包含一个简单的网页，其中包含来自第三方来源的三项功能：

  • 嵌入视频

  • 用于呈现折线图的数据可视化库

  • 社交媒体分享微件

。 <ph type="x-smartling-placeholder">
</ph> 突出显示第三方资源的页面的屏幕截图。
示例应用中的第三方资源。

您将首先衡量应用的性能，然后应用每种分析法来提升应用性能的不同方面。

衡量性能

首先在全屏视图中打开示例应用：

  1. 点击 Remix to Edit 以使项目可修改。
  2. 如需预览网站，请按查看应用。然后按 全屏 全屏。

在该页面上运行 Lighthouse 性能审核，以确定基准性能：

  1. 按 `Ctrl+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
  2. 点击 Lighthouse 标签页。
  3. 点击移动设备。
  4. 选中性能复选框。（您可以清除“审核”部分中的其余复选框。）
  5. 点击 Simulated Fast 3G, 4x CPU Slowdown。
  6. 选中清除存储空间复选框。
  7. 点击运行审核。

在计算机上运行审核时，具体结果可能会有所不同，但您应该会注意到 First Contentful Paint (FCP) 时间非常长，并且 Lighthouse 建议两个机会进行调查：消除阻塞渲染的资源和预先连接到所需的源。（即使各项指标均显示为绿色，优化仍会带来改善。）

Lighthouse 审核的屏幕截图，其中显示了 2.4 秒的 FCP 和两个机会：消除阻塞渲染的资源和预先连接到所需的源。

推迟第三方 JavaScript

消除阻塞渲染的资源审核发现，通过延迟来自 d3js.org 的脚本可以节省时间：

屏幕截图：“消除阻塞渲染的资源”审查，其中突出显示了 d3.v3.min.js 脚本。

D3.js 是一个用于创建数据可视化的 JavaScript 库。示例应用中的 script.js 文件使用 D3 实用函数来创建 SVG 折线图，并将其附加到页面中。此处的操作顺序很重要：script.js 必须在文档解析完毕且 D3 库加载后运行，因此它包含在 index.html 中的结束 </body> 标记之前，且紧邻该标记。

不过，D3 脚本包含在网页的 <head> 中，这会阻止对其余文档进行解析：

index.html 的屏幕截图，其中在标头中突出显示了脚本标记。

将以下两个 Magic 属性添加到脚本标记中时，可以解除对解析器的阻止：

  • async 可确保脚本在后台下载，并在下载完成后首次执行。

  • defer 可确保脚本在后台下载，并在解析完成后执行。

由于此图表对整个网页并不是很重要，并且很有可能位于非首屏位置，因此请使用 defer 来确保没有解析器阻塞。

第 1 步：使用 defer 属性异步加载脚本

在 index.html 的第 17 行上，将 defer 属性添加到 <script> 元素中：

<script src="https://d3js.org/d3.v3.min.js" defer></script>

第 2 步：确保操作顺序正确无误

由于 D3 已延迟，script.js 将在 D3 准备就绪之前运行，从而导致错误。

具有 defer 属性的脚本会按其指定顺序执行。为了确保 script.js 在 D3 就绪后执行，请向其中添加 defer，并将其移到文档的 <head> 中，紧跟在 D3 <script> 元素之后。现在，它不再阻止解析器，下载也会更快开始。

<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="./script.js" defer></script>

延迟加载第三方资源

所有非首屏资源都适合采用延迟加载。

示例应用在 iframe 中嵌入了一个 YouTube 视频。要查看网页发出的请求和来自嵌入式 YouTube iframe 的请求，请执行以下操作：

  1. 如需预览网站，请按查看应用。然后按 全屏 全屏。
  2. 按 `Ctrl+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
  3. 点击网络标签页。
  4. 选中停用缓存复选框。
  5. 在限制下拉菜单中选择 Fast 3G。
  6. 重新加载页面。

开发者工具 Network 面板的屏幕截图。

网络面板显示，该网页总共发出了 28 个请求，并传输了近 1 MB 的压缩资源。

如需确定 YouTube iframe 发出的请求，请在 Initiator（发起方）列中查找视频 ID 6lfaiXM6waw。若要按网域将所有请求归为一组，请执行以下操作：

  • 在网络面板中，右键点击列标题。

  • 在下拉菜单中，选择网域列。

  • 如要按网域对请求进行排序，请点击网域列标题。

新排序方式显示，有其他向 Google 网域发送的请求。YouTube iframe 总共会针对脚本、样式表、图片和字体发出 14 次请求。但是，除非用户实际向下滚动并播放视频，否则实际上并不需要所有这些素材资源。

若能等到用户向下滚动到网页的相应部分再进行延迟加载，就可以减少网页最初发出的请求数量。这种方法可节省用户的并加快初始加载的速度。

实现延迟加载的一种方式是使用 Intersection Observer，这是一种浏览器 API，可在元素进入或退出浏览器视口时通知您。

第 1 步：阻止视频最初加载

要延迟加载视频 iframe，您必须先阻止它以常规方式加载。为此，请将 src 属性替换为 data-src 属性以指定视频网址：

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/lS9D6w1GzGY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

data-src 是数据属性，可让您在标准 HTML 元素上存储额外信息。数据属性可以任意命名，只要它以“data-”开头即可。

没有 src 的 iframe 根本无法加载。

第 2 步：使用 Intersection Observer 延迟加载视频

若要在用户滚动至视频时加载视频，您需要知道何时会加载。这正是 Intersection Observer API 的用武之地。借助 Intersection Observer API，您可以注册一个回调函数，该函数会在要跟踪的元素进入或退出视口时执行。

首先，请创建一个新文件，并将其命名为 lazy-load.js：

  • 点击 New File 并为其命名。
  • 点击添加此文件。

将脚本标记添加到文档标头中：

 <script src="/lazy-load.js" defer></script>

在 lazy-load.js 中，创建一个新的 IntersectionObserver 并向其传递一个要运行的回调函数：

// create a new Intersection Observer
let observer = new IntersectionObserver(callback);

现在，在 observe 方法中将其作为实参传递，从而为 observer 提供要观看的视频的目标元素（本例中为视频 iframe）：

// the element that you want to watch
const element = document.querySelector('iframe');

// register the element with the observe method
observer.observe(element);

callback 会接收 IntersectionObserverEntry 对象的列表和 IntersectionObserver 对象本身。每个条目都包含一个 target 元素和一些属性，这些属性用于说明该条目的尺寸、位置、进入视口的时间等。IntersectionObserverEntry 的属性之一是 isIntersecting，这是一个布尔值，当元素进入视口时等于 true。

在此示例中，target 为 iframe。当 target 进入视口时，isIntersecting 等于 true。如需查看实际效果，请将 callback 替换为以下函数：

let observer = new IntersectionObserver(callback);
let observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(entry => {
      console.log(entry.target);
      console.log(entry.isIntersecting);
    });
  });
  1. 如需预览网站，请按查看应用。然后按 全屏 全屏。
  2. 按 `Ctrl+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
  3. 点击控制台标签页。

请尝试上下滚动。您应该会看到 isIntersecting 的值发生更改，并且目标元素已记录到控制台。

如需在用户滚动到相应位置时加载视频，请使用 isIntersecting 作为条件来运行 loadElement 函数，该函数会从 iframe 元素的 data-src 获取值，并将其设置为 iframe 元素的 src 属性。替换操作会触发视频加载。然后，视频加载完毕后，对 observer 调用 unobserve 方法以停止观看目标元素：

let observer = new IntersectionObserver(function (entries, observer) {
  entries.forEach(entry => {
    console.log(entry.target);
    console.log(entry.isIntersecting);
  });
});
    if (entry.isIntersecting) {
      // do this when the element enters the viewport
      loadElement(entry.target);
      // stop watching
      observer.unobserve(entry.target);
    }
  });
});

function loadElement(element) {
  const src = element.getAttribute('data-src');
  element.src = src;
}

第 3 步：重新评估效果

要查看资源大小和数量的变化情况，请打开开发者工具 Network 面板，然后重新加载页面。网络面板显示该网页发出了 14 个请求，大小仅为 260 KB。这是一项非常可观的改进！

现在，向下滚动页面，留意网络面板。视频播放之前，您应该会看到该网页触发了其他请求。

预先连接到所需的源

您已经延迟了非关键 JavaScript 并延迟加载了 YouTube 请求，因此现在可以优化其余的第三方内容了。

为链接添加 rel=preconnect 属性可指示浏览器在请求相应资源之前与网域建立连接。此属性最适合用于提供您确定网页需要的资源的来源。

您在第一步中建议的预先连接到必需的源中的 Lighthouse 审核，通过与 staticxx.facebook.com 和 youtube.com 建立早期连接，您可以节省大约 400 毫秒的时间：

预先连接到必需的来源审核，并突出显示 staticxx.facebook.com 网域。

由于 YouTube 视频现在已经过延迟加载，因此只会留下 staticxx.facebook.com（社交媒体分享微件的来源）。尽早与此网域建立连接非常简单，只需在文档的 <head> 中添加 <link> 标记即可：

  <link rel="preconnect" href="https://staticxx.facebook.com">

重新评估效果

这是网页优化后的状态。请按照此 Codelab 的衡量性能部分中的步骤再运行一次 Lighthouse 审核。

Lighthouse 审核结果显示 FCP 为 1 秒且性能得分为 99。