告别字体闪烁 / 首屏卡顿！preload 让关键资源 “高优先级” 提前到

⚡️ 浏览器"未卜先知"的秘密：资源提示符，让你的页面加载速度快人一步！

前端性能优化专栏 - 第四篇

在前端性能优化的战场上，时间就是金钱，尤其是在页面加载的关键时刻。我们上一篇讲到 PerformanceObserver 可以精准地测量性能，但测量只是第一步，更重要的是主动出击，让浏览器在用户需要资源之前，就提前做好准备。

今天，我们就来揭秘浏览器"未卜先知"的秘密武器------资源提示符（Resource Hints） 。

资源提示符（Resource Hints）是 <link> 标签 rel 属性的一组特殊值，用于告诉浏览器未来即将发生的资源处理策略，让它提前做准备。

简单来说，它们是开发者给浏览器下达的"预处理指令"，让浏览器在空闲或关键时刻，提前完成一些耗时的网络操作，从而：

xml 复制代码

<!-- 资源提示符示例 -->
<link rel="preconnect" href="//cdn.example.com">

资源提示符家族主要有四个核心成员，它们各有神通，针对不同的优化场景：

ini 复制代码

<link rel="dns-prefetch" href="//api.example.com">

专业名词解释：DNS 解析 DNS（Domain Name System）解析是将人类可读的域名（如 www.google.com）转换为机器可读的 IP 地址（如 142.250.190.14）的过程。这是一个网络请求的起点，通常需要几十到几百毫秒。

ini 复制代码

<link rel="preconnect" href="//cdn.example.com" crossorigin>

作用： 完成 DNS 解析 + TCP 握手 + TLS 加密握手，全流程建立连接。
效果： 极大地消除了后续资源请求的网络延迟。
使用时机：
- 字体库 、核心 API 、CDN 静态资源 等关键第三方域名。
- 注意： 建立连接会消耗资源，建议控制数量（一般建议 ≤6 个）。

bash 复制代码

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

作用： 直接以高优先级 下载关键资源，但下载后暂不执行。
特点： 提前触发关键资源的加载，确保资源在需要时立即可用。
常见场景：
- CSS 定义的字体文件（避免文本闪烁 FOUT/FOIT）。
- 背景图或 LCP 元素图片（加速最大内容绘制）。
- 首屏必需的动态脚本。

注意： preload 必须配合 as 属性指定资源类型，否则浏览器会重复下载。

ini 复制代码

<link rel="prefetch" href="next-page.js">

作用： 在当前页加载完成后 ，利用浏览器空闲时间请求资源。
特点： 优先级最低，不会与当前页面的关键资源竞争带宽。
使用场景：
- 优化"下一个页面"的加载体验。
- SPA 路由 中，预取用户可能访问的下一个 chunk。
- 基于用户行为预测的预加载。

资源提示符家族的目标一致：让资源"早一步"准备好。

它们的核心区别在于时机与深度：

提示符	深度（提前到哪一步）	时机（何时触发）	优先级	适用场景
dns-prefetch	仅 DNS 解析	尽早	低	非关键第三方资源
preconnect	DNS + TCP + TLS	尽早	中	关键第三方域名
preload	下载资源	尽早（高优先级）	高	当前页面的关键资源
prefetch	下载资源	页面空闲时	最低	下一个页面的资源

重要提醒： 资源提示符虽好，但过度使用可能导致浪费带宽或建立过多连接，反而拖慢性能。请务必根据实际的性能数据（比如 RUM 采集的数据）来合理规划和使用。

下一篇预告： 既然资源都提前加载了，如何让它们在下次访问时更快出现呢？下一篇我们将深入探讨前端性能优化的"节流大师"------HTTP 缓存机制。敬请期待！