资源提示 —— Preload，Prefetch 和 Preconnect 的本质和区别

[译] 资源提示 —— 什么是 Preload，Prefetch 和 Preconnect？

了解并充分利用 Preload、Prefetch 和 Preconnect，提升页面性能，减少往返路径，进而优化资源加载。

资源提示，也称为资源预加载或资源预获取指令，能够允许前端开发人员来优化资源的加载，减少往返路径，并且在浏览器下载和执行 HTML 之前指定浏览器应当提前下载或链接的资源，从而提高网页性能。

在 Web 开发中，为了让页面更快地呈现给用户，我们通常需要浏览器预先加载某些资源。这些资源可以是图像、脚本文件、样式表，甚至字体文件。而资源提示正是用来指导浏览器提前下载这些资源的。

一、资源提示简介

资源提示是 HTML 中的一组属性，用于告诉浏览器在页面加载时应如何处理某些资源。资源提示包括以下三种：

• <link rel="preload">
• <link rel="prefetch">
• <link rel="preconnect">

二、preload

<link rel="preload"> 标签用于告诉浏览器在页面加载时立即下载指定的资源。这对于那些对页面性能至关重要的资源非常有用，例如 JavaScript 库或样式表。
在 preload 提示中，我们还可以利用 as 属性进一步指定加载的资源类型，以便浏览器更好地处理它。as 属性支持以下值：

• script：用于 JavaScript 文件。
• style：用于 CSS 样式表文件。
• font：用于字体文件。
• image：用于图像文件。
• video：用于视频文件。
• audio：用于音频文件。

三、prefetch

<link rel="prefetch"> 标签用于告诉浏览器在页面加载时异步地下载指定的资源。这对于那些对页面性能不那么重要的资源非常有用，例如图像或视频。

四、preconnect

<link rel="preconnect"> 标签用于告诉浏览器在页面加载时建立与指定服务器的连接。这对于那些需要与其他服务器进行大量通信的网站非常有用，例如电子商务网站或社交网络。

五、对比和应用场景

提示	预加载资源的时机	加载方式	场景
preload	在页面加载时立即	同步	页面必需的资源，例如 JavaScript 库或样式表。
prefetch	在页面加载时异步	异步	页面非必需的资源，例如图像或视频。
preconnect	在页面加载时	无资源加载	需要与其他服务器进行大量通信的网站，例如电子商务网站或社交网络。

六、SEO 优化

资源提示还可以用于提高网站的 SEO 排名。通过在页面加载时立即下载关键资源，可以减少页面的加载时间，从而提高网站的整体性能。这对于移动设备上的网站尤其重要，因为移动设备的网络连接速度通常较慢。