深入解析：preload与prefetch的区别及最佳实践
在前端性能优化领域，资源加载策略直接影响页面的加载速度和用户体验。<link>标签的preload和prefetch属性是浏览器提供的两种关键资源预加载机制，它们都能提前加载资源，但适用场景和行为逻辑却大不相同。本文将从定义、触发时机、优先级等维度全面对比两者的差异，并总结实际开发中的应用技巧。
一、核心定义：预加载的两种不同策略
preload：当前页面的“紧急需求”
preload用于提前加载当前页面即将用到的关键资源（如核心CSS、字体、关键JavaScript），确保这些资源在需要时能立即可用，避免阻塞页面渲染。
<!-- 预加载当前页面需要的关键CSS -->
<link rel="preload" href="main.css" as="style">
<!-- 预加载当前页面需要的字体文件 -->
<link rel="preload" href="iconfont.woff2" as="font" type="font/woff2" crossorigin>
核心特点：
- 属于“当前页面优先级”的预加载，浏览器会立即安排加载。
- 必须指定
as属性声明资源类型（如style、script、font），否则浏览器无法确定资源优先级和用途。 - 若资源加载后未被使用，浏览器会在控制台警告“资源预加载但未使用”。
prefetch：未来页面的“提前准备”
prefetch用于提前加载用户可能在未来页面（如跳转的下一页）用到的资源，利用当前页面的空闲时间加载，不影响当前页面的加载性能。
<!-- 预加载用户可能访问的下一页所需的JS -->
<link rel="prefetch" href="next-page.js">
<!-- 预加载可能用到的图片资源 -->
<link rel="prefetch" href="product-image.jpg">
核心特点：
- 属于“低优先级”预加载，浏览器会在当前页面加载完成、网络空闲时才开始加载。
- 无需指定
as属性（浏览器可自动推断），但指定后能提升加载效率。 - 资源加载后会被缓存，当用户访问包含该资源的页面时，可直接从缓存读取。
二、关键差异对比表
| 维度 | preload | prefetch |
|---|---|---|
| 加载时机 | 页面加载初期，立即触发 | 页面空闲时（Idle状态），延迟触发 |
| 优先级 | 高（与页面关键资源同级） | 低（低于当前页面的大部分资源） |
| 目标资源 | 当前页面必须用到的关键资源 | 未来页面（可能访问）可能用到的资源 |
| 资源类型声明 | 必须通过as指定（如as="style"） | 可选，推荐指定以优化加载 |
| 未使用后果 | 浏览器控制台警告，浪费带宽 | 无警告，即使未使用也属正常（预测性加载） |
| 缓存策略 | 短期缓存（通常会话内有效） | 长期缓存（遵循HTTP缓存策略） |
| 典型使用场景 | 核心CSS、首屏JS、字体文件 | 下一页JS、可能点击的图片、懒加载资源 |
三、技术细节：浏览器如何处理preload和prefetch
1. 加载优先级与浏览器调度
浏览器对资源的加载有严格的优先级排序（从高到低：Critical > High > Medium > Low），preload和prefetch的优先级差异直接影响加载顺序：
-
preload：根据
as属性指定的类型分配优先级。例如：as="style"或as="script"通常被标记为“High”优先级，与页面内嵌的CSS/JS同级。as="font"因涉及文本渲染，优先级也较高（但受crossorigin属性影响）。
-
prefetch：无论资源类型，均被标记为“Low”优先级，浏览器会在当前页面的关键资源（如HTML、CSS、首屏JS）加载完成后，利用空闲带宽加载。
示例：当页面同时包含preload的main.css和prefetch的next.js时，浏览器会先加载main.css（High优先级），待页面加载完成后再加载next.js（Low优先级）。
2. 缓存行为差异
两者的缓存机制不同，直接影响资源的复用效率：
-
preload：加载的资源被放入“内存缓存”（memory cache），仅在当前页面会话内有效，刷新页面后可能需要重新加载（除非同时设置了HTTP缓存头）。
-
prefetch：加载的资源被放入“磁盘缓存”（disk cache），遵循HTTP缓存策略（如
Cache-Control、Expires），即使关闭页面再重新打开，只要缓存未失效，可直接复用。
注意：若preload的资源同时设置了强缓存头（如Cache-Control: max-age=31536000），也会被持久化到磁盘缓存，与prefetch一致。
3. 资源使用的“绑定”机制
preload要求资源必须被当前页面使用，否则会被视为“加载浪费”，这是因为preload的设计目标是“确保关键资源可用”，而非“预测性加载”：
-
当
preload的资源通过<link rel="stylesheet">、<script>或代码动态引用（如import()）时，浏览器会将预加载的资源“绑定”到使用处，避免重复加载。 -
若未被使用，浏览器会在控制台抛出警告（如“The resource was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate
asvalue and it is used soon.”）。
prefetch则无此限制，因为其本质是“预测用户行为的提前加载”，即使未被使用也属于正常情况（例如用户未点击下一页）。
四、最佳实践：何时使用preload，何时使用prefetch？
1. preload的最佳场景
-
首屏关键CSS：避免CSSOM构建延迟导致的渲染阻塞。
<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">（通过
onload将preload转换为stylesheet，确保样式生效） -
字体文件：字体加载延迟可能导致文本闪烁（FOIT/FOUT），
preload可提前加载：<link rel="preload" href="inter-regular.woff2" as="font" type="font/woff2" crossorigin>（字体属于跨域资源，必须添加
crossorigin属性，否则可能重复加载） -
动态导入的关键JS：若页面通过
import()动态加载核心功能JS，可提前preload：<link rel="preload" href="app-core.js" as="script"> <script>// 动态导入时会复用preload的资源import('./app-core.js').then(module => module.init()); </script>
2. prefetch的最佳场景
-
下一页的核心资源：根据用户行为预测（如首页预加载详情页JS）：
<!-- 首页预加载商品详情页的JS --> <link rel="prefetch" href="product-detail.js" as="script"> -
用户可能触发的资源：如点击按钮后弹出的弹窗所需的CSS/JS：
<!-- 预加载可能弹出的弹窗样式 --> <link rel="prefetch" href="modal.css" as="style"> -
懒加载资源的提前准备：对于滚动时可能加载的图片或组件，可用
prefetch在空闲时加载：<!-- 预加载懒加载区域的图片 --> <link rel="prefetch" href="lazy-image.jpg" as="image">
3. 避免这些错误用法
- 不要用preload加载非关键资源：如低优先级的图片或次要JS，会占用带宽影响关键资源加载。
- 不要用prefetch加载当前页面资源：其低优先级可能导致资源加载延迟，影响当前页面渲染。
- 避免过度prefetch：预加载过多未使用的资源会浪费用户带宽（尤其移动网络），建议结合用户行为数据动态添加。
- 不要忽略as属性：
preload缺少as会导致浏览器将资源视为“fetch”类型，优先级降低且可能重复加载。
五、工具与检测：验证预加载效果
1. 浏览器开发者工具
- Network面板：查看资源的“Initiator”列，
preload或prefetch的资源会标记为“Link”。 - Performance面板：记录页面加载过程，检查
preload资源是否在关键路径上，prefetch资源是否在空闲时加载。
2. Lighthouse审计
Lighthouse会检测preload的资源是否被有效使用，以及是否有必要的prefetch建议，帮助优化预加载策略。
六、总结：合理使用预加载提升性能
preload和prefetch都是提升页面性能的有力工具，但核心差异在于加载时机和目标资源：
preload是“当前页面的紧急任务”，用于确保关键资源立即可用，解决“阻塞渲染”问题。prefetch是“未来页面的提前准备”，用于利用空闲时间加载可能用到的资源，提升后续页面的加载速度。
实际开发中，应根据资源的“必要性”和“使用时机”选择合适的预加载方式：关键资源用preload确保首屏体验，未来可能用到的资源用prefetch提升后续交互体验。同时，需避免过度预加载导致的带宽浪费，结合性能监控工具持续优化，才能真正发挥两者的价值。