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

笔记首页 >> 教程系列 >> 如何在 HTML 中使用 Preload 和 Prefetch 加载资源

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

介绍

在页面上加载资源是实现最佳 Web 性能和无缝用户体验的重要部分。通常，现实世界的应用程序会加载多个 CSS、字体、JavaScript 和图像文件。默认情况下，这些资源会阻止渲染，这会影响加载性能。

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

先决条件

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

谷歌浏览器下载并安装。本教程基于 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>. 使用window.onload它将console.log消息创建一个 JavaScript 函数'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，然后重新加载页面。

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

无预载加载

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

第 2 步 – 预加载资源

为了防止默认的渲染阻塞并确保字体和 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 文件后，返回开发人员工具并加载页面，网络仍设置为Slow 3G。您会看到Loaded日志在 CSS 请求开始之前显示，如下图所示：

使用预加载加载

但是，您可能已经注意到 CSS 样式尚未应用于文本。那是因为使用 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 页面中实现 prefectching，请将的值更改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 资源的方式不同。这个例子取自这篇关于 preloading 的谷歌开发者文章，显示了这一点：

索引.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，这个How to Build a PWA in Vanilla JavaScript教程可以帮助你。

觉得文章有用？

点个广告表达一下你的爱意吧！