什么是HTML预加载？prefetch和preload

畫卷琴夢

发布时间：2025-08-11 13:31:02

1062人浏览过

来源于php中文网

原创

preload用于预加载当前页面关键资源，提升首屏性能；2. prefetch用于预测性加载后续页面资源，优化未来导航体验；3. 选择preload应对关键资源发现延迟，如字体、核心css/js；4. 选择prefetch基于用户行为预测，如下一步可能访问的页面；5. 需避免滥用导致带宽、cpu和内存浪费；6. 通过开发者工具检查发起者、优先级和瀑布流图进行调试；7. 配合正确缓存策略防止版本不一致问题。预加载通过主动干预资源加载顺序，解决浏览器默认加载机制带来的性能瓶颈，从而提升用户体验感知速度和页面性能指标。

什么是HTML预加载？prefetch和preload

HTML预加载，简单来说，就是告诉浏览器：“嘿，这个资源你可能很快就要用到了，先把它准备好，别等真正需要的时候才开始下载。”这就像是你在厨房做饭，提前把所有食材都洗好切好，而不是等到炒菜时才发现盐没了再去买。

prefetch

和

preload

是实现这种“未雨绸缪”的两种不同策略，它们的目标和适用场景其实大相径庭。

解决方案

预加载的核心在于打破浏览器默认的资源发现和下载顺序，主动介入，以提升用户体验。这两种技术都通过

<link>

标签在HTML头部声明。

preload

(预加载)

立即学习“前端免费学习笔记（深入）”；

preload

旨在解决当前页面渲染所需关键资源的“发现延迟”问题。浏览器在解析HTML时，会按顺序发现并下载资源。但有些资源，比如CSS文件里引用的字体、JavaScript文件里动态加载的图片，或者一些在CSS之后才会被解析到的关键样式，它们往往在浏览器发现并下载它们之前，页面已经开始渲染了，这会导致字体闪烁（FOIT/FOUT）、布局跳动或首次渲染时间过长。

preload

的作用就是：

高优先级下载： 告诉浏览器这个资源很重要，请立即下载。
不阻塞渲染： 资源下载后会被缓存，但不会立即执行（JS）或渲染（CSS），直到主线程真正需要它。
需要
as
属性：强制要求你声明资源的类型（如
```
script
```
,
```
style
```
,
```
font
```
,
```
image
```
等），这对于浏览器正确设置优先级、处理CORS策略以及后续资源利用至关重要。

示例：

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/main.js" as="script">

crossorigin

属性对于字体文件尤其重要，因为字体通常是跨域加载的。

prefetch

(预获取)

prefetch

则更像是一种“预测性”的优化。它用于预先获取用户在接下来的导航中可能会访问的页面或资源。它的优先级非常低，浏览器只会在当前页面加载完成后，并且网络空闲时，才会去下载这些资源。它不会阻塞当前页面的渲染。

示例：

<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/images/large-gallery-image.jpg">

prefetch

的目的是提升用户在后续页面访问时的体验，让页面感觉加载得更快。它是一种基于用户行为预测的优化，如果预测不准，那就是一种带宽的浪费。

Jaaz

开源的AI设计智能体

下载

为什么我们需要预加载？它解决了哪些痛点？

在我看来，预加载技术最核心的价值在于它赋予了开发者一种能力，去“纠正”或“优化”浏览器默认的资源加载行为。浏览器很聪明，但它不总是能猜到我们开发者心中那个“最理想”的加载顺序。

一个很常见的痛点是资源发现延迟。比如，你的网站使用了自定义字体。浏览器在解析HTML后，会去下载CSS文件，然后解析CSS，这时候才发现CSS里引用了字体文件。这个发现过程本身就是一种延迟。用户可能已经看到了页面的文本，但因为字体还没加载完成，会有一个明显的字体闪烁（FOIT，Flash Of Invisible Text，或FOUT，Flash Of Unstyled Text）。通过

preload

，我们可以提前告诉浏览器：“喂，这个字体很重要，先下下来！”这样，当CSS解析到字体引用时，字体文件可能已经静静地躺在缓存里了，用户体验自然就流畅了许多。

再比如，某些关键的JavaScript文件，它们可能在HTML文档的末尾才被加载执行，但它们又对页面的交互性至关重要。如果等待HTML完全解析完才开始下载，用户会感觉页面“卡顿”或“无响应”。

preload

可以提前下载这些JS文件，减少等待时间。

另外，提升用户感知速度也是一个重要方面。虽然实际的总加载时间可能没有缩短太多，但通过优化关键资源的加载时机，可以显著提升首次内容绘制（FCP）和首次有意义绘制（FMP），让用户觉得页面“瞬间”就出来了。这种感知速度的提升，对于留住用户、提升转化率都有着不可忽视的作用。它间接也对搜索引擎优化（SEO）有益，因为页面加载速度是谷歌等搜索引擎的一个排名因素。

prefetch和preload在实际项目中如何选择和应用？

选择

prefetch

还是

preload

，关键在于你预加载的资源是当前页面急需的，还是未来页面可能需要的。

preload

的应用场景和注意事项：

自定义字体： 这是

preload

最经典的用例。

<link rel="preload" href="/static/fonts/NotoSansSC-Regular.woff2" as="font" type="font/woff2" crossorigin>

记住

crossorigin

，否则字体可能不会被加载或会触发CORS错误。

关键CSS/JS文件： 如果你的CSS或JS文件对首屏渲染或核心交互至关重要，且它们不是内联的，可以考虑
```
preload
```
。
```
<link rel="preload" href="/css/main.css" as="style">
<link rel="preload" href="/js/vendor.js" as="script">
```
响应式图片： 结合
```
<picture>
```
元素，可以预加载针对特定视口尺寸的关键图片。
避免滥用：
```
preload
```
优先级很高，预加载过多不必要的资源反而会拖慢页面，因为它会占用带宽和CPU资源，甚至可能导致更重要的资源被推迟。务必只预加载那些“立即且绝对需要”的资源。

prefetch

的应用场景和注意事项：

用户下一步可能访问的页面： 比如在一个电商网站，用户在浏览产品列表时，可以预获取排名靠前或用户行为数据显示最可能点击的几个产品详情页。
```
<link rel="prefetch" href="/product/detail/12345.html">
```
多步骤表单的下一步： 在用户填写完第一步后，可以预获取第二步所需的资源。
搜索结果页的预加载： 用户输入搜索词后，如果后台能预测用户最可能点击的结果，可以提前预获取这些结果页。
单页应用 (SPA) 中的路由预加载： 在SPA中，当用户鼠标悬停在某个导航链接上时，可以通过JavaScript动态地添加
```
prefetch
```
链接，预加载对应路由的组件或数据。
注意用户行为：
```
prefetch
```
是基于猜测的，如果猜测不准，就会浪费用户的流量和服务器资源。因此，最好结合用户行为数据分析来做决策。例如，在移动网络下，可能要更谨慎地使用
```
prefetch
```
。

预加载的潜在风险与调试技巧

任何优化手段都有其两面性，预加载也不例外。用得好是神来之笔，用不好可能适得其反。

潜在风险：

带宽浪费： 这是最直接的风险。如果你预加载了用户根本不会用到的资源，尤其是在移动数据网络下，这无疑是消耗用户流量，且毫无收益。这就像你准备了一大桌子菜，结果客人只吃了一小碗面，剩下的都浪费了。
CPU和内存消耗： 浏览器需要处理和存储这些预加载的资源，这会增加客户端的CPU和内存负担，在低端设备上可能导致卡顿。
资源冲突： 如果
```
preload
```
设置不当，优先级过高地加载了不那么重要的资源，反而可能挤占了真正关键资源的下载带宽，导致页面核心功能加载变慢。
缓存问题： 预加载的资源如果版本更新了，但浏览器使用了旧的缓存，可能会导致内容不一致或功能异常。这通常需要配合正确的缓存策略（如版本哈希）来解决。

调试技巧：

开发者工具 (Network Tab)： 这是我调试预加载最常用的工具。
- Initiator (发起者)： 在网络面板的
```
Initiator
```
  列，你可以清楚地看到是
```
preload
```
  还是
```
prefetch
```
  触发了资源的下载。这能帮你确认预加载是否按预期工作。
- 优先级： 观察资源的优先级。
```
preload
```
  的资源通常会有较高的优先级（比如
```
Highest
```
  ），而
```
prefetch
```
  的优先级则较低（如
```
Lowest
```
  或
```
Idle
```
  ）。
- 瀑布流图： 分析瀑布流图，看预加载的资源是否真的在页面其他关键资源之前或并行下载了。它有没有阻塞其他请求？是不是下载得太早或太晚？
Lighthouse / PageSpeed Insights： 这些性能分析工具会给出关于预加载的建议。比如，它们可能会提示你“预加载关键请求”来提升首次绘制时间，或者警告你“避免不必要的网络负载”，这通常意味着你可能预加载了太多无用的资源。
Chrome DevTools
Performance
Tab：录制页面加载过程，可以更细致地分析每个阶段的CPU和网络活动。你可以看到预加载的资源在时间轴上的具体位置，以及它们对主线程的影响。
控制台警告： 如果你
```
preload
```
的
```
as
```
属性设置不正确，或者预加载的资源加载失败，浏览器通常会在控制台给出警告或错误信息，这能帮助你快速定位问题。