文章中英模式

常见的前端面试题目 - 页面载入 - Prefetch & Preload 解析

深入理解 Prefetch 与 Preload 技术的差异和应用场景，掌握前端资源优化关键技术，提升网站载入速度与用户体验。

文章中英模式

懒得看文章？那就来看视频吧

基本概念

Prefetch 和 Preload 是现代浏览器提供的资源载入优化技术，它们能帮助开发者控制资源载入的优先顺序，大幅提升页面载入速度和用户体验。

1. Preload（预载入）- 提前载入当前页面必需的关键资源
2. Prefetch（预抓取）- 提前载入用户可能需要的未来资源

这两种技术虽然名称相近，但用途和行为完全不同，正确使用对优化网站性能至关重要。

Preload vs Prefetch 资源载入流程:
┌─────────────────────────────────────────────────────┐
│                                                     │
│  Preload                      Prefetch              │
│  ┌───────────────┐           ┌───────────────┐     │
│  │ 关键资源       │           │ 未来可能需要的  │     │
│  │ (立即高优先级) │           │ 资源(低优先级)  │     │
│  └───────┬───────┘           └───────┬───────┘     │
│          │                           │             │
│          ▼                           ▼             │
│  ┌───────────────┐           ┌───────────────┐     │
│  │ 立即载入       │           │ 浏览器闲置时   │     │
│  │ 参与当前页面   │           │ 才载入，存入   │     │
│  │ 渲染过程       │           │ 缓存供将来使用 │     │
│  └───────────────┘           └───────────────┘     │
│                                                     │
└─────────────────────────────────────────────────────┘

特点:

1. 高优先级 - 优先载入最重要的资源
2. 参与关键渲染路径 (CRP) - 直接影响当前页面渲染
3. 不会阻塞页面解析 - 平行下载，不影响 HTML 解析
4. 控制在 4~6 个资源 - 太多会导致性能问题

实现方式:

<!-- 预载入 CSS -->
<link rel="preload" href="critical-styles.css" as="style">

<!-- 预载入字体文件 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 预载入 JavaScript -->
<link rel="preload" href="important-script.js" as="script">

<!-- 预载入 LCP 主要图片 -->
<link rel="preload" href="hero-image.jpg" as="image">

使用情境:

1. 关键 CSS 和 JavaScript - 确保页面骨架快速呈现
2. 主要图片 (LCP 元素) - 缩短最大内容绘制时间
3. 自定义字体 - 避免字体闪烁，提前载入
4. 主要 API 数据 - 可用于预载入 JSON 数据

Preload - 当前页面的关键资源

Preload 用于载入当前页面必需的资源，这些资源会在页面解析 HTML 的同时就立即开始下载，不会阻塞页面的解析过程。

特點:

1. 高优先级 - 优先载入最重要的资源
2. 参与关键渲染路径 (CRP) - 直接影响当前页面渲染
3. 不会阻塞页面解析 - 平行下载，不影响 HTML 解析
4. 控制在 4~6 个资源 - 太多会导致性能问题

實現方式:

<!-- 预载入 CSS -->
<link rel="preload" href="critical-styles.css" as="style">

<!-- 预载入字体文件 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 预载入 JavaScript -->
<link rel="preload" href="important-script.js" as="script">

<!-- 预载入 LCP 主要图片 -->
<link rel="preload" href="hero-image.jpg" as="image">

使用情境:

1. 关键 CSS 和 JavaScript - 确保页面骨架快速呈现
2. 主要图片 (LCP 元素) - 缩短最大内容绘制时间
3. 自定义字体 - 避免字体闪烁，提前载入
4. 主要 API 数据 - 可用于预载入 JSON 数据

Prefetch - 未来可能需要的资源

Prefetch 用于载入未来页面可能需要的资源，浏览器会在闲置时间以低优先级下载这些资源，并放入缓存，供将来使用。

特點:

1. 低优先级 - 仅在浏览器闲置时处理
2. 不参与当前页面渲染 - 仅作缓存用途
3. 用于未来需求 - 为用户下一步操作做准备
4. 节省后续载入时间 - 从缓存中读取已经预抓取的资源

實現方式:

<!-- 预抓取下一页资源 -->
<link rel="prefetch" href="/next-page.html">

<!-- 预抓取 JavaScript 模块 -->
<link rel="prefetch" href="non-critical-bundle.js">

<!-- 预抓取可能需要的图片 -->
<link rel="prefetch" href="secondary-images.jpg">

使用情境:

1. 分页导航 - 预抓取下一页/上一页内容
2. 搜索结果 - 预抓取排名靠前的搜索结果页面
3. 非关键 JS bundle - 预抓取非立即需要的功能模块
4. 登录/注册页面 - 预抓取用户可能即将访问的页面

性能影响与应用技巧

Preload 与 LCP (Largest Contentful Paint)

LCP 是 Core Web Vitals 中的重要指标，反映页面上最大内容元素呈现的时间。正确使用 Preload 可以大幅改善 LCP 时间。

┌───────────────────────────────────────────────┐
│                                               │
│  未使用 Preload:                              │
│  解析 HTML ──> 发现 LCP 图片 ──> 开始载入图片  │
│                                               │
│  使用 Preload:                                │
│  解析 HTML ──┐                                │
│              ├──> 平行载入 LCP 图片           │
│  继续解析    ┘                                │
│                                               │
└───────────────────────────────────────────────┘

总结

Preload 和 Prefetch 是现代网页开发中重要的资源载入优化技术，正确使用它们可以显著提升网站的载入速度和用户体验。

1. Preload - 对当前页面的关键资源进行高优先级载入
2. Prefetch - 对未来可能需要的资源进行低优先级载入

记住：

1. 控制 Preload 资源数量，避免过度使用
2. 使用 Prefetch 为用户的下一步操作做准备
3. 结合性能监测，确保这些技术真正带来性能提升

通过策略性地实施这些技术，开发者可以创造更快速、更流畅的网页浏览体验，提高用户满意度并改善转化率。

🔥 常见面试题目

（一）Preload 和 Prefetch 的主要区别是什么？

解答：Preload 和 Prefetch 有以下关键差异：

特性	Preload	Prefetch
用途	当前页面必需的资源	未来页面可能需要的资源
优先级	高	低（闲置时才载入）
时机	立即下载	浏览器闲置时
使用场景	当前页面渲染需要	预期用户下一步操作

代码范例：

<!-- 范例: 预载入一个关键的字体 -->
<link rel="preload" href="/fonts/important-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

（二）什么情况下应该使用 Preload 而不是正常的资源载入方式？

解答：应在以下情况使用 Preload：

1. 重要资源在 CSS 中被引用，但被发现太晚（如自定义字体）
2. 关键资源在页面 HTML 结构深处，被发现太晚
3. 需要提前载入 LCP 图片以改善关键性能指标
4. 资源不是由 HTML 解析器直接发现的（如由 JavaScript 动态载入的关键资源）

总之，当资源对当前页面很重要，但在正常载入顺序中会被延后发现时，就应该考虑 Preload。

（三）使用 Preload 可能带来的问题是什么？如何避免？

解答：主要问题包括：

1. 过度使用 - 预载入太多资源会分散带宽，反而拖慢关键资源载入
2. 未使用资源 - 如果预载入后 3 秒内未使用，Chrome 会在控制台显示警告
3. 重复请求 - 若设置不当，同一资源可能被请求两次

避免方法：

1. 严格控制 Preload 数量，通常不超过 4-6 个
2. 确保每个 Preload 资源都有正确的 as 属性
3. 只 Preload 真正关键的资源，并确保它们会被立即使用
4. 监控页面性能，确认 Preload 确实带来性能提升

<!-- 范例: 预载入一个关键的字体 -->
<link rel="preload" href="/fonts/important-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">