引言
在 HTML 中，标签可以用于加载各种外部资源，而通过设置不同的 rel 属性值，可以实现对资源加载的优化。本文介绍 preload、prefetch、preconnect 和 prerender 的作用及其适用场景。
preload
- 作用: 提前加载当前页面需要的资源。使用 preload 可以告诉浏览器某个资源是当前页面必需的，并应尽早加载。
- 适用场景: 当你知道某个资源在页面加载后立即需要时，比如字体、样式表或关键的脚本文件。使用 preload 可以减少资源加载的延迟。
示例：
preload 告诉浏览器这些资源是当前页面渲染所必需的，并应优先加载。
<!-- 提前加载一个字体 -->
<link rel="preload" href="https://example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<!-- 提前加载一个样式表 -->
<link rel="preload" href="styles.css" as="style">
<!-- 提前加载一个脚本 -->
<link rel="preload" href="script.js" as="script">
在浏览器的主渲染机制介入前就进行预加载，这一机制使得资源（as 属性声明各种不同的资源）可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。
prefetch
- 作用: 提前获取可能在将来需要的资源。prefetch 用于加载那些用户可能会访问的后续页面的资源。
- 适用场景: 当用户可能会在当前页面的操作后导航到下一个页面时，预先加载该页面的资源可以加快页面切换速度。适用于预测用户行为的场景。
示例：
prefetch 用于提前获取用户可能会在接下来的页面中需要的资源。
<!-- 预先获取一个未来可能需要的脚本 -->
<link rel="prefetch" href="next-page-script.js">
<!-- 预先获取一个未来可能需要的图片 -->
<link rel="prefetch" href="next-page-image.jpg" as="image">
在浏览器空闲时预加载未来要使用的资源，优先级较低，常用的是 dns-prefetch。
preconnect
- 作用: 优化与外部资源服务器的连接。preconnect 会提前建立到外部域的连接，以减少后续请求的延迟。
- 适用场景: 当知道页面将从特定的外部域加载资源（比如 API、CDN 等）时，使用 preconnect 可以减少 DNS 解析、TLS 握手等连接开销。
示例：
preconnect 可以减少与外部服务器建立连接的延迟。
<!-- 提前建立与CDN的连接 -->
<link rel="preconnect" href="https://cdn.example.com">
<!-- 提前建立与第三方API的连接 -->
<link rel="preconnect" href="https://api.example.com">
允许浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，建立与服务器的连接，这包括 DNS 解析，TLS 协商，TCP 握手，这消除了往返延迟并为用户节省了时间。
prerender
⚠️ 该功能已弃用，推荐Speculation Rules API。
作用: 提前渲染整个页面。prerender 会完全加载和渲染一个用户可能会访问的页面。 适用场景: 适用于预测性很强的场景，即用户几乎肯定会访问的下一个页面。由于其会消耗较多带宽和内存，因此应谨慎使用。
总结
- preload 用来加快当前页面关键资源的加载。
- prefetch 用来为可能的下一步用户操作提前加载资源。
- preconnect 用来减少与外部域的连接延迟。
- prerender 用来提前加载并渲染即将访问的页面，但要注意资源消耗。
