如何在 HTML 中使用预加载和预取功能加载资产

介绍

页面上加载资产是实现最佳网页性能和无缝用户体验的重要组成部分. 通常,现实世界的应用程序加载多个CSS、字体、JavaScript和图像文件。

在本教程中,您将探索一个名为 resource hints 的新功能,例如预加载和预先加载。

前提条件

要完成本教程,您将需要以下内容:

Google Chrome 已下载并安装. 本教程是基于 Google Chrome 版本 86.0.4240.80
HTML 的理解,您可以在 How To Build A Website with HTML系列中找到
JavaScript 的基本理解。

步骤1 - 了解反馈阻断

当对资源的请求进行渲染阻止时,这意味着window.onload事件不会触发,直到请求完成。在现代单页应用程序中,大多数资产,如CSS和JavaScript文件以及图像,依赖于此事件才能开始运作。

要在行动中看到这一点,请创建一个 HTML 文件,使用标准的 boilerplate HTML 在场. 这可以在您选择的代码编辑器中完成:

 1[label index.html]
 2<!DOCTYPE html>
 3<html>
 4  <head>
 5
 6  </head>
 7  <body>
 8
 9  </body>
10</html>

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

 1[label index.html]
 2<!DOCTYPE html>
 3<html>
 4  <head>
 5    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
 6  </head>
 7  <body>
 8
 9  </body>
10</html>

使用 CSS,将所有p标签的font-family设置为 Roboto:

 1[label index.html]
 2<!DOCTYPE html>
 3<html>
 4  <head>
 5    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
 6      <style>
 7      p {
 8        font-family: Roboto;
 9      }
10    </style>
11  </head>
12  <body>
13
14  </body>
15</html>

有了您的元数据和CSS,您可以在<body>中创建一个<p>,上面写着Hello:

 1[label index.html]
 2<!DOCTYPE html>
 3<html>
 4  <head>
 5    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
 6    <style>
 7      html {
 8        font-family: Roboto;
 9      }
10    </style>
11  </head>
12  <body>
13    <p> Hello </p>
14  </body>
15</html>

要在操作中查看渲染阻止,请在<body>中添加<script>标签。使用window.onload创建一个JavaScript函数,该函数将console.log显示Loaded消息:

 1[label index.html]
 2<!DOCTYPE html>
 3<html>
 4  <head>
 5    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
 6    <style>
 7      html {
 8        font-family: Roboto;
 9      }
10    </style>
11  </head>
12  <body>
13    <p> Hello </p>
14
15    <script>
16      window.onload = function () {
17        console.log('Loaded');
18      }
19    </script>
20  </body>
21</html>

使用您的代码,在Chrome中打开您的HTML文件,然后打开开发工具并导航到网络选项卡,将连接降至慢3G,然后重新加载页面。

加载消息在加载CSS文件后立即登录到控制台,如下图像所示:

Load without preload

当构建和加载更大的网站时,这种效果会变得更具问题。您的CSS和JavaScript资产,以及许多其他资产,可能需要很长时间才能加载。

步骤二:预装资源

为了防止默认的渲染阻止,并确保页面资源如字体和CSS在页面生命周期中开始加载,您需要实施预加载。 rel="preload" 属性值用于预加载资产。它可以应用于多个文件格式,包括 CSS、JS、字体、图像等。根据您想要预加载的文件类型,相应的 as 属性可能还需要与 `rel="preload' 一起包含。

返回 HTML 文件并更改以前的 <link>. 设置 rel 等于 "preload". 添加 as' 属性集等于 "style"`:

 1[label index.html]
 2<head>
 3    <link
 4      rel="preload"
 5      as="style"
 6      href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
 7    <style>
 8      html {
 9        font-family: Roboto;
10      }
11    </style>
12  </head>

当您的 HTML 文件在 Google Chrome 中打开时,返回 开发工具,并将页面加载到网络仍然设置为 慢3G.如下图所示,在 CSS 请求开始之前,您将看到加载日志:

Load using preload

然而,您可能已经注意到 CSS 风格尚未应用到文本中,这是因为使用预加载或预加载只会获取资源,但不会应用它。

要做到这一点,请将onload属性添加到<link>标签中,设置onload等于this.rel =stylesheet``:

1[label index.html]
2<link
3  rel="preload"
4  as="style"
5  onload="this.rel = 'stylesheet'"
6  href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>

通过在下载中将rel属性设置为stylesheet,浏览器被告知使用该资源. 由于它已经在内存中下载,它不会再次下载。

由于下载解决方案依赖于 JavaScript,请添加包含原始<link>标签的<noscript>标签,而rel设置为stylesheet:

 1[label index.html]
 2<link
 3  rel="preload"
 4  as="style"
 5  onload="this.rel = 'stylesheet'"
 6  href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>
 7<noscript>
 8  <link
 9    rel="stylesheet"
10    href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
11</noscript>

这将确保字体显示如果JavaScript被禁用或无法加载。

您现在知道如何预加载您的网页资产,有时您可能想预加载您的资源。

步骤3 - 预测资源

预装工作类似于预装。区别在于,在预装资源时,浏览器将资源视为低优先级,这意味着资源或资产将在稍后加载。

要在您的 HTML 页面中实施 prefectching,请将rel值更改为prefetching:

1[label index.html]
2<link
3  rel="prefetch"
4  as="style"
5  onload="this.rel = 'stylesheet'"
6  href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>

预加载和预加载 CSS 可以帮助改善 Web 性能. 您可能还想将预加载应用到您的 JavaScript。

步骤 4 – 预加载 JavaScript

重新加载 JavaScript 资源是不同的,这个例子是从这篇关于预加载的 Google 开发人员文章中提取的),它显示了以下内容:

1[label index.html]
2<link rel="preload" href="used-later.js" as="script">
3<!-- ... -->
4<script>
5  var usedLaterScript = document.createElement('script');
6  usedLaterScript.src = 'used-later.js';
7  document.body.appendChild(usedLaterScript);
8</script>

<$>[注] **注:**代码片段从创建的作品中复制,并由 Google 共享并在 Apache 2.0 许可证下授权。

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

结论

预加载和预先加载允许您控制资源的加载方式,并有助于提高 Web 性能. 通过本教程,您实现了资源提示,以预加载和预先加载 CSS、字体和 JavaScript 等资源。

要用 Angular 创建渐进式 Web 应用程序,此如何用 Angular 构建渐进式 Web 应用程序教程可以做到这一点,如果你喜欢 Vanilla JavaScript,这个如何在 Vanilla JavaScript 中构建 PWA教程可以帮助你。