如何在 HTML 中使用 Preload 和 Prefetch 来加载资源

发表 admin at 2024年8月26日

类别

未分类

标签

介绍

加载页面上的资源是实现最佳网页性能和无缝用户体验的重要部分。通常，实际应用会加载多个 CSS、字体、JavaScript 和图片文件。这些资源默认会阻止渲染，从而影响加载性能。

在本教程中，您将探索一项名为资源提示的新功能，例如预加载和预取。这些资源提示将帮助您克服渲染阻塞。

先决条件

要完成本教程，您需要以下内容：

下载并安装 Google Chrome。本教程基于 Google Chrome 86.0.4240.80 版本。
对 HTML 的理解，您可以在“如何使用 HTML 构建网站”系列中找到。
对 JavaScript 有基本的了解。本“如何使用 JavaScript 编码”系列可帮助您实现此目标。

第 1 步 - 了解渲染阻塞

当对资源的请求是渲染阻塞时，这意味着该window.onload事件在该请求完成之前不会被触发。在现代单页应用中，大多数资产（如 CSS 和 JavaScript 文件以及图像）都依赖于此事件才能开始运行。这意味着，在渲染阻塞请求完成加载之前，UI 的某些部分不会开始渲染或显示在屏幕上。

要查看实际效果，请创建一个包含标准样板 HTML 的 HTML 文件。您可以在您选择的代码编辑器中完成此操作：

索引.html

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>

  </body>
</html>

在头部，使用<link>标签访问您选择的Google 字体。此代码片段将使用 Roboto：

索引.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
  </head>
  <body>

  </body>
</html>

添加<style>标签。使用 CSS，将font-family所有p标签设置为 Roboto：

索引.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
      <style>
      p {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>

  </body>
</html>

有了元数据和 CSS，您就可以在里面<p>创建一个：<body>Hello

索引.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>
    <p> Hello </p>
  </body>
</html>

要查看渲染阻止的实际效果，请<script>在中添加标签<body>。创建一个 JavaScript 函数，使用window.onload该函数来显示console.log消息'Loaded'：

索引.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>
  <body>
    <p> Hello </p>

    <script>
      window.onload = function () {
        console.log('Loaded');
      }
    </script>
  </body>
</html>

代码就绪后，在 Chrome 中打开 HTML 文件。接下来，打开开发者工具并导航到“网络”选项卡。将连接速度降低到“慢速 3G”，然后重新加载页面。

LoadedCSS 文件加载后，消息会立即记录在控制台中，如下图所示：

无预紧力负载

在构建和加载较大的网站时，这种影响会变得更加成问题。您的 CSS 和 JavaScript 资源以及许多其他资源可能需要很长时间才能加载。因此，您的 CSS 样式可能不会立即显示。预加载资源可以消除这种影响并防止延迟加载。

为了防止默认的渲染阻塞并确保页面资源（如字体和 CSS）在页面生命周期的早期开始加载，您需要实现预加载。rel="preload"属性值用于预加载资产。它可以应用于多种文件格式，包括 CSS、JS、字体、图像等。根据您要预加载的文件类型，as可能还需要将相应的属性与一起包含在内rel="preload"。对于 CSS，as=需要设置为"style"。对于 JavaScript，as=需要设置为"script"。

返回 HTML 文件并更改先前的<link>。设置rel为"preload"。添加as属性设置为"style"：

索引.html

<head>
    <link
      rel="preload"
      as="style"
      href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
    <style>
      html {
        font-family: Roboto;
      }
    </style>
  </head>

在 Google Chrome 中打开 HTML 文件后，返回开发者工具并加载页面，网络仍设置为慢速 3G。您会看到日志Loaded在 CSS 请求开始之前显示，如下图所示：

使用预加载

但是，您可能已经注意到 CSS 样式尚未应用于文本。这是因为使用 preload 或 prefetch 只会获取资源，而不会应用它。相反，preload 和 prefetch 会将资源保留在内存中。您必须定义何时加载资源。

字体需要在加载后立即应用。为此，请将属性添加onload到<link>标签。设置onload为"this.rel = 'stylesheet'"：

索引.html

<link
  rel="preload"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>

通过将rel属性设置为stylesheetin onload，浏览器被告知使用该资源。由于该资源已在内存中下载，因此不会再次下载。

由于该onload解决方案依赖于 JavaScript，因此添加<noscript>包含原始<link>标签的标签并将其rel设置为"stylesheet"：

索引.html

<link
  rel="preload"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>
<noscript>
  <link
    rel="stylesheet"
    href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
</noscript>

这将确保当 JavaScript 被禁用或加载失败时字体能够显示。

现在您已经知道如何预加载网页资产。但有时您可能希望预取资源。

第 3 步 - 预取资源

预取与预加载的工作原理类似。不同之处在于，在预取资源时，浏览器会将该资源视为低优先级。这意味着资源或资产将稍后加载。因此，预取通常用于最初不需要但稍后会使用的资源。

为了在 HTML 页面中实现预处理，请将的值更改rel为"prefetching"：

索引.html

<link
  rel="prefetch"
  as="style"
  onload="this.rel = 'stylesheet'"
  href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>

预取和预加载 CSS 有助于提高 Web 性能。您可能还想将预加载应用于 JavaScript。预加载 JavaScript 与预加载 CSS 资源不同。

第 4 步 - 预加载 JavaScript

预加载 JavaScript 资源的方式有所不同。此示例取自Google Developers 的预加载文章，展示了以下内容：

索引.html

<link rel="preload" href="used-later.js" as="script">
<!-- ... -->
<script>
  var usedLaterScript = document.createElement('script');
  usedLaterScript.src = 'used-later.js';
  document.body.appendChild(usedLaterScript);
</script>

注意：代码片段是从Google 创建和共享的作品中复制而来的，并根据Apache 2.0 许可证获得许可。

这里的重要步骤是设置src文件的属性并将其插入到 DOM 中。

结论

预加载和预取功能可让您控制资源的加载方式，并有助于提高 Web 性能。通过本教程，您实现了资源提示来预加载和预取 CSS、字体和 JavaScript 等资源。这将帮助您创建更快的渐进式 Web 应用。

要使用 Angular 创建渐进式 Web 应用，本教程《如何使用 Angular 构建渐进式 Web 应用》可以实现此目的。如果您更喜欢 Vanilla JavaScript，本教程《如何使用 Vanilla JavaScript 构建 PWA》可以为您提供帮助。

介绍

先决条件

第 1 步 - 了解渲染阻塞

第 2 步 - 预加载资源

第 3 步 - 预取资源

第 4 步 - 预加载 JavaScript

结论