1. 概念与基本原理
在网页加载优化领域，HTML5 预加载与预取的区别全解析：差异、场景与性能影响经常被提及。本节将从原理出发，解释两种资源 Hint 的工作机制、核心差异点以及对渲染路径的潜在影响，帮助开发者做出更明智的资源调度。
核心区别在于优先级与触发时机，preload通常用于“尽早加载关键资源”，以降低首屏渲染时间；而 prefetch则在闲置网络带宽时进行，目标是为未来导航准备缓存。理解这一点对网页性能优化和搜索引擎体验都很重要。
1.1 preload 的定义与核心要点
预加载（preload）是一种对资源进行高优先级加载的 Hint。它让浏览器在解析 HTML 时就开始获取指定资源，以确保在需要该资源时已经可用，降低阻塞。
使用场景包括需要在首屏中快速呈现的 CSS、字体、关键脚本等。使用 preload 可以拉动关键资源的下载优先级，但若滥用可能挤占网络带宽，导致其他资源被延迟。
<link rel="preload" href="/assets/critical.css" as="style">
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>1.2 prefetch 的定义与核心要点
预取（prefetch）是一种低优先级的资源获取方式，通常在浏览器空闲带宽时进行，目标是在用户下一步操作时加速页面加载。
Prefetch 的资源多为未来导航需要，能被缓存但不会影响当前页面的渲染。核心策略是“为后续页面做准备”，而非立刻提升当前页面的渲染速度。
<link rel="prefetch" href="/assets/next-page.js" as="script">
<link rel="prefetch" href="/pages/next.html" as="document">2. 场景与差异对比
在实际场景中，理解差异是实现高效资源管理的关键。Preload 直接影响当前页面的资源加载顺序与渲染时间；Prefetch 指向后续页面的加载，降低未来跳转的等待时间。
差异要点包括触发时机、资源类型、缓存行为与对网络带宽的影响。正确的配比可以显著提升用户感知性能，同时避免资源浪费。
2.1 触发时机与优先级
Preload 在文档解析阶段就被触发，浏览器会将该资源立刻加入下载队列并提高优先级。这是提升首屏渲染的重要手段，特别是关键的 CSS、字体或脚本。
相比之下，Prefetch 使用低优先级的下载策略，只在网络空闲时执行，不影响当前渲染。这意味着对当前页面体验的直接影响较小，但为后续页面铺垫缓存。
<link rel="preload" href="/critical.css" as="style">
<link rel="prefetch" href="/pages/next.html" as="document">2.2 资源类型与缓存策略
Preload 的资源类型通常是对当前渲染有直接影响的资源（如 style、font、script），需要尽快可用，以避免阻塞渲染。
Prefetch 常用于 HTML、JS、CSS 的未来版本或下一页数据，这些资源常被放入缓存，以便后续使用，不会立即进入渲染路径。
<link rel="preload" href="/critical.css" as="style">
<link rel="prefetch" href="/assets/next-page.js" as="script">3. 性能影响与实测要点
正确使用 preload 可以显著降低首屏时间和最大内容渲染时间。通过提前加载关键资源，减少阻塞资源的加载等待，对 LCP、First Contentful Paint 等指标有直接影响。
Prefetch 对长远的性能影响体现在 用户导航的流畅性上，例如快速加载下一页、快速开启应用内功能，但若网络带宽不足或预取的资源未被使用，可能造成额外的带宽消耗。
3.1 对关键渲染路径的影响
Preload 通过提前获取关键样式和脚本，可以让浏览器更早地完成样式计算与脚本执行，提升渲染阶段效率。这是直接作用于首屏渲染的关键。
相对地，Prefetch 不参与当前页面的渲染路径，更多用于未来场景的缓存命中，而不是当前的渲染收益。
/* 通过预加载关键资源提升首屏渲染速度示例 */
<link rel="preload" href="/styles/critical.css" as="style">3.2 缓存命中与数据有效性
Prefetch 的命中率取决于用户的后续行为，若用户跳转到与预取资源相关的页面，命中率将显著提高。
对于缓存策略，浏览器会处理过期与缓存清理，确保资源不会长期占用缓存而影响新资源的加载。
<link rel="prefetch" href="/pages/2.html" as="document">
<link rel="prefetch" href="/scripts/next-page.js" as="script">4. 实战要点与代码示例
下面提供典型的实现示例，帮助理解在实际页面中如何并行使用 preload 与 prefetch。注意不要滥用，避免挤占带宽，以免影响当前页面体验。
当页面中存在关键资源需要优先加载时，可以使用 preload。同时在用户可能进入的后续页面上使用 prefetch 作为后续准备，实现无缝切换。
4.1 典型 preload 用例
常见场景包括首屏字体、关键样式、首要脚本。预加载可以降低 CLS，提升可用性。
<link rel="preload" href="/assets/critical.css" as="style" crossorigin>
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>4.2 典型 prefetch 用例
场景包括应用内导航、跨页面资源加载。通过预取可以在用户点击前就准备好资源，提升跳转体验。
<link rel="prefetch" href="/pages/next.html" as="document">
<link rel="prefetch" href="/scripts/next-page.js" as="script">