预加载允许您指定在页面加载期间立即或很快需要的资源（例如字体、图像、JavaScript 和 CSS）。 在您网站的每个页面的<head>…</head>部分顶部添加一个link rel=\'preload\'标签。
比如：
<link rel=\'preload\' href=\'font.woff2\' as=\'font\' type=\'font/woff2\' crossorigin>
打开网页时，浏览器会从服务器请求HTML文档，解析其内容，并为引用资源提交单独请求。作为开发人员，您知道页面需要的所有资源以及哪些资源最为重要。您可以使用这些知识提前请求关键资源，加快加载的过程。本文介绍了如何使用 <link> 来达成此目的。
预加载的工作原理
预加载最适合用于浏览器通常较晚发现的资源。
在本例中，Pacifico字体是在样式表通过 @font-face 规则定义的。浏览器只有在完成下载和解析样式表后才会加载字体文件。
通过预加载某个资源，您希望浏览器可以比正常发现它更早地获取该资源，因为您认为它对当前页面很重要。
在本例中，已预加载了Pacifico字体，所以下载会与样式表并行进行。
关键请求链代表着浏览器优先处理和获取的资源顺序。 Lighthouse会将位于该链第三层的资产识别为后期发现的资产。您可以使用preload。
有助于修复以下两种类型的警告：
1.预加载密钥请求
预加载关键请求是Web字体的常见警告。Font Awesome是您可能会看到的一种非常常见的字体。
预加载关键请求
2.渲染阻塞资源
通过预加载，您还可以修复渲染阻塞资源警告，因为资产以非阻塞方式加载。
消除渲染阻塞资源
如果您正在预加载图像，它还可以帮助降低最大内容绘制 (LCP) 时间。
可预加载资源
有许多不同的资源可以预加载。
公共资源
font: 字体文件。script: JavaScript文件。style: CSS样式表。image: 图像文件 (.jpg,.png,.webp)。
其他资源
audio: 音频文件document: 旨在由<frame>或<iframe>嵌入的HTML文档。embed：要嵌入到<embed>元素中的资源。fetch：要通过fetch或XHR请求访问的资源，例如ArrayBuffer或JSON文件。object：要嵌入到<object>元素中的资源。track: WebVTT文件。worker：一个JavaScript网络worker或共享worker。video: 视频文件。
注意：在撰写本文时，Chrome存在一个未解决的bug，即预加载请求比其他更高优先级资源的获取速度更快。在解决此问题之前，请注意预加载的资源如何“跳过队列”并比应有的时间更早地被请求。
预加载CSS中定义的资源
在浏览器下载并解析CSS文件之前，不会发现这些文件中使用 @font-face 规则定义的字体或背景图像。预加载这些资源可确保在下载CSS文件之前获取它们。
预加载CSS文件
如果您使用了等等。
请查看Chrome Resource Priorities and Scheduling文档，详细了解浏览器如何确定不同类型资源的优先级。
注意：省略
as属性或使用了无效值，就相当于XHR请求，这时浏览器不知道它获取的内容，因此无法确定正确的优先级。它还可能导致某些资源（例如脚本）被获取两次。
某些类型的资源，例如字体，以匿名模式加载。对于这些资源，您必须设置 preload 的 crossorigin 属性：
<link href=\"ComicSans.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>注意：没有设置
crossorigin属性的预加载的字体将被获取两次！
另外，<link> 元素还接受 type 属性，它包含链接资源的MIME类型。浏览器使用 type 属性的值来确保资源仅在其文件类型受支持时才被预加载。如果浏览器不支持指定的资源类型，它将忽略 <link> 。
请尝试通过预加载web字体提高网页性能。
您可以通过 Link HTTP标头预加载任何类型的资源：
Link: </css/style.css>;; as=\"style\"
在HTTP标头中指定 preload 的一个好处是，浏览器不需要解析文档来发现它，这在某些情况下可以提供一些小幅改进。
使用webpack预加载JavaScript模块
如果您使用了创建应用程序构建文件的模块打包器，则需要检查它是否支持预加载标签的注入。在webpack 4.6.0或更高版本中，它通过在 import()中使用magic comments（魔法注释）支持预加载：
import(_/* webpackPreload: true */_ \"CriticalChunk\")
如果您使用的是旧版webpack，请使用第三方插件，例如preload-webpack-plugin。
预加载时要记住的事项
- 不要预加载每个脚本，否则它实际上会导致性能问题，例如增加总阻塞时间 (TBT)。预加载应该只用于立即需要的资源，因此它们以非阻塞方式加载。这通常用于网络字体、图像、CSS和JS。
- 如果您正在使用缓存清除技术（例如查询字符串
domain.com/style.css?ver=1.0），请不要忘记浏览器会看到确切的URL。因此，您将需要使用查询字符串URL，或者您可以使用句柄动态预加载。 - 如果您有一个CDN重写您的资产的URL，请确保您要预加载的所有资源首先被正确地重写。如果URL不匹配，您最终可能会加载资源两次。
- 如果您预加载样式表 (CSS) 或脚本 (JS)，并且您正在使用插件来组合您的CSS/JSS（https://web.dev
