无需登录 数据私有 本地保存

预加载/预获取指南 - 资源提示选择

9
0
0
0

资源提示选择指南

理解 preload、prefetch、preconnect 等资源提示，为你的网站做出最佳性能决策

1 2 3
📍 这个资源在什么时候使用？
推荐结果

👆 请在上方选择你的场景，这里将显示最佳推荐

配置参数
生成代码
<!-- 请配置参数 -->
📋 放置位置建议

将生成的标签放置在 HTML <head> 中，尽早被浏览器解析。

资源提示 作用范围 浏览器行为 优先级 最佳场景 浏览器支持
dns-prefetch 仅 DNS 提前解析域名到IP地址 低 CDN域名、分析服务域名 ✅ 全面
preconnect DNS+TCP+TLS 建立完整连接（含SSL握手） 中 确定使用的第三方API、字体CDN ✅ 全面
preload 当前页面资源 强制提前下载，不阻塞渲染 高 关键CSS、首屏字体、LCP图片 ✅ 全面
prefetch 未来页面资源 空闲时低优先级下载 最低 下一页的JS/CSS、分页内容 ✅ 全面
prerender* 完整页面 后台渲染整个页面（已废弃） 中 改用 Speculation Rules ⚠️ 已废弃
modulepreload ES模块 下载并解析编译JS模块 高 深层ES模块依赖链 ✅ 现代浏览器
Speculation Rules 未来页面 按规则预渲染或预获取页面 低 高置信度下一页（如搜索结果） 🆕 Chrome 109+

* prerender 已被废弃，推荐使用 Speculation Rules API 替代。

常见问题与知识点
什么是资源提示（Resource Hints）？
资源提示是浏览器提供的一组机制，允许开发者提前告知浏览器可能需要加载的资源或需要建立的连接。通过在 <head> 中添加 <link> 标签，浏览器可以在空闲时提前执行DNS解析、建立连接、下载资源等操作，从而显著提升页面加载性能和用户体验。核心资源提示包括：dns-prefetch、preconnect、preload、prefetch、modulepreload，以及较新的 Speculation Rules API。
preload 和 prefetch 有什么区别？
preload 用于当前页面需要的资源，具有高优先级，浏览器会尽快下载。适用于关键CSS、首屏字体、LCP图片等。
prefetch 用于未来导航可能需要的资源，具有最低优先级，浏览器只在空闲时下载。适用于下一页的JS/CSS、分页内容等。
简单记忆：preload = 现在就需要的，prefetch = 以后可能需要的。
dns-prefetch 和 preconnect 怎么选？
dns-prefetch 仅执行DNS解析，开销极小（通常<1ms），适合不确定是否会使用的第三方域名。
preconnect 会完成DNS+TCP+TLS完整握手，开销较大（可能100-300ms），适合确定会使用的关键第三方资源（如字体CDN、API服务器）。
最佳实践：对关键第三方域名使用 preconnect（限制在4-6个以内），对其他第三方域名使用 dns-prefetch 作为轻量替代。
preload 的 as 属性为什么必须设置？
as 属性告诉浏览器资源的类型，这非常重要：
1. 确定优先级 — 不同资源类型有不同的默认优先级（如font > style > script）
2. 匹配缓存 — 确保预加载的资源与后续使用时的缓存键一致
3. 安全策略 — 浏览器根据类型应用正确的CSP策略
4. 避免重复下载 — 没有as属性可能导致资源被下载两次
常见的as值：style、script、font、image、fetch、document、worker、video、audio、track。
如何用 preload 正确加载字体？
加载字体文件时，preload 标签需要特别注意：
1. 必须设置 as="font"
2. 必须设置 crossorigin="anonymous"（即使同域也建议设置）
3. 指定 type 属性帮助浏览器判断支持（如 type="font/woff2"）
示例：<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
过度使用资源提示有什么风险？
过度使用会带来显著问题：
1. 带宽浪费 — 预获取用户根本不会访问的资源
2. 阻塞关键资源 — 过多的preload会抢占关键资源的带宽
3. 连接开销 — 每个preconnect都占用浏览器连接池（通常6个/域名）
4. CPU消耗 — 预渲染未使用的页面浪费计算资源
建议：preload限制在3-5个关键资源，preconnect限制在4-6个域名，prefetch用于高置信度的下一页。
Speculation Rules API 是什么？与 prerender 有何不同？
Speculation Rules API 是 Chrome 109+ 引入的新机制，用于替代已废弃的 prerender 链接标签。它通过 <script type="speculationrules"> 以JSON格式定义预渲染或预获取规则。
优势：更灵活的条件触发、支持URL模式匹配、浏览器可智能控制资源使用、支持 eager/moderate/conservative 三种模式。示例见代码生成器。
如何验证资源提示是否生效？
可以通过以下方式验证：
1. Chrome DevTools Network面板 — 查看资源优先级列，preload资源显示为"High"
2. Application面板 → Preload/Prefetch — 查看预加载资源列表
3. Performance面板 — 分析加载时间线
4. Lighthouse审计 — 检查是否有未使用的preload建议
5. about:net-internals/#events（Chrome）— 查看DNS预解析和预连接事件
modulepreload 和普通 preload 有何不同？
modulepreload 专为ES模块设计：
1. 不仅下载模块，还会解析和编译模块代码
2. 自动处理模块依赖图，递归预加载依赖
3. 遵循模块的CORS和完整性策略
4. 使用 as="script" 的 preload 不会编译模块，仅下载
适用场景：有深层ES模块依赖链的应用，可显著减少模块加载瀑布流。
preload 资源如果超时未使用会怎样？
Chrome会在控制台输出警告："The resource ... was preloaded using link preload but not used within a few seconds..."。超时时间大约为3秒（因浏览器而异）。未使用的preload资源会被垃圾回收，但在这期间它占用了带宽和连接。因此务必确保preload的资源在页面加载早期就会被使用。
移动端使用资源提示需要注意什么？
移动端需特别注意：
1. 带宽敏感 — 避免在4G/弱网下预加载大体积资源
2. 数据节省模式 — 部分浏览器在省流模式下会忽略prefetch
3. 电池消耗 — preconnect和preload的无线模块唤醒有能耗成本
4. 使用 media 属性 — 可通过 media="(min-width: 768px)" 在移动端跳过不必要的preload
5. Speculation Rules 的 eagerness — 移动端建议使用 conservative 模式
🔧 相关工具