速查在线工具箱加了预加载，为什么页面反而更慢了？
少写一个属性，浏览器就认不出你预加载的是同一个文件，于是同一份资源下载两遍。
最常见的原因是缺少必要的属性。预加载要声明资源类型，否则浏览器按错误的模式发请求，之后真正的请求匹配不上这份下载，只能再下一遍——不但没加速，还多花了一份带宽，而且先后两次请求会互相排挤。字体更特殊：字体请求按跨域匿名模式发出，所以哪怕是同源文件，预加载也必须带上跨域标记，否则同样会下载两次。
第二个原因是优先级被用滥。预加载是高优先级的强制下载，写十个就等于把所有资源都提到「紧急」，等于没有优先级。有经验的做法是只预加载一两个真正关键、且很晚才被发现的文件。
第三个原因是白预加载：当前页面根本用不到的资源被提前下载，既耗流量又挤占关键请求的带宽，窗口加载完成后约三秒仍未使用，浏览器还会在控制台给出性能告警。
这类提示的目的，是把「浏览器很晚才发现的关键资源」提前拉起来。但只要属性写错，收益立刻变成负值——最典型的就是同一个文件下载两次。
所以判断要不要加，先问一句：这个资源当前页面会用吗？会在很晚才被发现吗？两个都是「是」，才值得加。
这一篇把四种提示的分工、两个致命属性、以及数量上的克制原则讲清楚。
1四种提示各干什么
名字很像，服务对象与优先级完全不同。
| 提示 | 做的事 | 优先级 | 用在什么场合 |
|---|---|---|---|
| dns-prefetch | 只解析域名 | 很低 | 稍后会碰到的很多第三方域名 |
| preconnect | 建好连接，含握手与加密协商 | 高 | 当前页面真正依赖的两到四个关键域名 |
| preload | 完整下载当前页要用的某个文件 | 高，按类型定档 | 晚被发现的关键文件 |
| prefetch | 空闲时下载下一次导航要用的资源 | 最低 | 几乎确定要去的下一个页面 |
把两者用反是最常见的错：给下一跳的资源做预加载会白花当前页面的带宽，给当前页的关键字体做预取又赶不上时间。
2两个致命属性
不写这两个，预加载就从加速变成减速。
- 声明资源类型
- 不写类型，浏览器按错误的请求模式与头信息发送，之后的真实请求匹配不上，于是下载两遍
- 字体的跨域标记
- 字体请求一律按匿名跨域模式发起，同源也一样；不写跨域标记，预加载落在另一个缓存里，字体照样下载两次
- 顺带要写对的
- 确认地址与真实请求完全一致（含查询参数），差一个字符就匹配不上
- 顺序也有讲究
- 运行时动态插入提示时，先把类型与跨域属性设好，再设地址，避免用错模式发出请求
最常见的现象就是网络面板里同一个字体出现两次请求，其中一次完全没被使用。
3数量上的克制
这类提示的共同特点是「多了就互相抵消」。
| 提示 | 建议数量 | 超了会怎样 |
|---|---|---|
| preload | 一到两个关键文件 | 优先级通胀，等于没有优先级，超过十个基本失去意义 |
| preconnect | 两到四个域名 | 连接占满套接字池，真实请求排队，反而更慢 |
| dns-prefetch | 可以很多 | 代价极低，适合铺给长尾域名 |
| prefetch | 按需 | 受缓存策略影响，且要照顾按流量计费的用户 |
一次连接的开销并不小：一次域名解析加两次往返，弱网环境下可能就是几百毫秒；所以连接要开在真正会用的域名上。
4三条落地经验
想加之前先自问这三句。
- 剪掉白预加载
- 当前页不用的资源不要提前拉；控制台的未使用告警就是这条的信号
- 注意缓存策略
- 预取依赖缓存，响应头里若声明不缓存，预取就是空操作
- 先测量再加
- 用真实设备测一遍加前加后的关键指标，没有改善就撤掉——提示是优化手段，不是装饰
一句话总结：属性写全、数量克制、确认当前页真的会用；这三条守住，预加载才会是正的收益。
顺着这个问题往下用
全部工具总览 →相关疑问
预加载会不会让首屏更快？
只有当它提前拉的是「晚被发现且确实关键」的资源时才会。资源本来就会被早早发现，或者当前页根本不用，加了只会挤占带宽。
预取会影响按流量计费的用户吗？
会。它在空闲时下载下一跳的资源，用户未必会访问那个页面。对流量敏感的场景应当保守，或改用能感知省流设置的机制。
为什么连接预热了却好像没生效？
最常见是跨域模式不匹配：页面开的是普通连接，真实请求走的是跨域模式，那就无法复用，只能再开一条。
老浏览器不支持会怎样？
这些提示都是渐进增强：不认识的浏览器直接忽略，页面照常工作，只是少了这段提前量。所以不必做特性检测才能用。
继续看：相关问题与资料
全部问题解答 →内容说明：本页针对具体使用问题作答，方法步骤与数值由本站自行整理与复算，事实性内容以对应官方规范与文档为准。内容最后核对日期：2026-10-09。若发现错误，欢迎通过页脚反馈入口告知。