HTML5的Preload和Prefetch有什么区别？如何优化资源加载？
在现代Web开发中，页面加载速度直接影响用户体验和搜索引擎排名。HTML5引入了多种资源提示，其中<link rel="preload">和<link rel="prefetch">是优化资源加载的两大利器。虽然它们看起来相似，但应用场景和浏览器处理机制却截然不同。
一、Preload详解
Preload（预加载）用于提前加载当前页面必定需要的资源。它告诉浏览器：“这个资源我马上就要用到，请尽快下载它。”
Preload的核心价值在于打破浏览器按需加载的常规，强制浏览器提前获取资源，从而减少资源加载与使用之间的时间差。它特别适用于那些隐藏在CSS或JS中的关键资源，比如字体文件、背景图或通过脚本动态插入的重要模块。
<!-- 预加载关键CSS --> <link rel="preload" href="styles/main.css" as="style"> <!-- 预加载关键字体 --> <link rel="preload" href="fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin> <!-- 预加载关键JS --> <link rel="preload" href="scripts/app.js" as="script">
注意事项：使用Preload时必须带上as属性，这不仅能让浏览器正确判断资源类型从而应用正确的优化策略（如根据优先级下载），还能通过Content-Type检查保证安全性。如果是跨域的字体资源，还需添加crossorigin属性。
二、Prefetch详解
Prefetch（预获取）用于提前加载未来可能需要的资源。它告诉浏览器：“这个资源我在接下来的页面或交互中可能会用到，如果你现在有空闲带宽，就顺便帮我下载下来吧。”
Prefetch的优先级极低，只有在浏览器空闲时才会执行，不会影响当前页面的关键资源加载。它非常适合用于多页应用（MPA）中下一个可能被用户访问的页面资源，或者单页应用（SPA）中按需加载的下一个代码块。
<!-- 预获取下一页面的CSS --> <link rel="prefetch" href="styles/next-page.css" as="style"> <!-- 预获取下一页面的JS模块 --> <link rel="prefetch" href="scripts/next-chunk.js" as="script">
三、Preload与Prefetch的核心区别
| 对比维度 | Preload | Prefetch |
|---|---|---|
| 目标场景 | 当前页面必定需要的资源 | 未来页面或交互可能需要的资源 |
| 优先级 | 高，浏览器会立即分配带宽下载 | 极低，仅在浏览器空闲时下载 |
| 带宽占用 | 抢占当前页面的网络带宽 | 利用闲置带宽，不影响当前页面 |
| 缓存策略 | 下载后存储在HTTP缓存中，若3秒内未使用，控制台会报警告 | 下载后存储在磁盘缓存中，供未来导航使用 |
四、如何全面优化资源加载？
除了Preload和Prefetch，前端还有许多资源加载优化策略，合理组合使用才能达到最佳性能。
1. 使用DNS Prefetch和Preconnect减少网络延迟
在请求跨域资源之前，浏览器需要先进行DNS解析和建立TCP连接。通过dns-prefetch和preconnect可以提前完成这些步骤。
<!-- 提前解析第三方域名的DNS --> <link rel="dns-prefetch" href="//www.ipipp.com"> <!-- 提前建立与第三方域名的连接（含DNS解析、TCP握手、TLS协商） --> <link rel="preconnect" href="https://www.ipipp.com">
2. 合理使用Async和Defer加载JavaScript
默认情况下，JS的加载和执行会阻塞HTML的解析。通过async和defer属性可以实现异步加载，避免阻塞渲染。
<!-- 异步加载，下载完立即执行，不保证顺序，适合独立脚本 --> <script src="analytics.js" async></script> <!-- 延迟加载，HTML解析完毕后按顺序执行，适合依赖DOM的脚本 --> <script src="app.js" defer></script>
3. 原生图片懒加载
对于长列表或含有大量图片的页面，使用loading="lazy"可以让图片在即将进入视口时才进行加载，极大节省初始加载带宽。
<img src="image.jpg" loading="lazy" alt="懒加载图片">
4. 资源压缩与合并
代码压缩：使用Webpack、Vite等构建工具对HTML、CSS、JS进行压缩，去除空格和注释。
图片优化：使用WebP等现代格式替代JPEG/PNG，并利用工具压缩图片体积。
Gzip/Brotli压缩：在服务器端开启Brotli或Gzip压缩，大幅减小网络传输体积。
五、总结
Preload和Prefetch是强大的浏览器资源提示，但必须精准使用。Preload是“雪中送炭”，用于加速当前页面的关键渲染路径，用不好反而会抢占带宽拖慢首屏；Prefetch是“未雨绸缪”，用于提升后续交互或页面的加载体验，不影响当前页面性能。结合DNS预解析、异步脚本、懒加载等手段，才能构建出极致流畅的Web体验。