在前端性能优化领域，资源加载策略直接影响页面的加载速度和用户体验。<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 as value 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提升后续交互体验。同时，需避免过度预加载导致的带宽浪费，结合性能监控工具持续优化，才能真正发挥两者的价值。