预加载不是问题，滥用才是问题；它强制立即下载资源，易挤占关键资源带宽、触发重复请求、因as类型错误被忽略，仅当资源早期使用、浏览器发现晚、路径确定时才应使用。
预加载（<link rel="preload">）本身不是问题，问题在于它被当成了“资源优化万能解”，结果反而拖慢首屏、浪费带宽、干扰浏览器默认加载逻辑。
为什么 <link rel="preload"> 会破坏资源优化效果
浏览器对 preload 是“无条件立即抓取”，不看优先级、不等渲染上下文、不参与 fetch priority 调度。你让它预加载一个 2MB 的 hero-video.mp4，哪怕用户根本没滚动到视频区域，它也会在 DOMContentLoaded 前抢占带宽，挤掉 critical CSS 或字体的请求。
- 预加载资源不会被浏览器自动去重：如果同一 URL 同时出现在
preload和后续<img src>中，会触发两次请求（Chrome 115+ 已修复部分场景，但仍有漏网） - 预加载的
as类型写错（比如把as="script"写成as="fetch"），会导致浏览器无法正确设置请求头或缓存策略，甚至被忽略 - 在 SSR 页面中动态插入
preload标签（如 React 的helmet），若服务端未精确判断资源是否真为当前页面 critical，很容易把非首屏 JS/CSS 也塞进去
哪些资源真的值得 preload？看三个硬条件
只有同时满足以下三点的资源，才建议加 preload：
- 必须在 HTML 文档解析早期就被用到（例如：阻塞渲染的
font、内联style中引用的woff2字体） - 浏览器默认发现机制太晚（比如字体在 CSS 文件里，而 CSS 又是
link异步加载的） - 资源路径确定、无运行时拼接（
preload不支持表达式或变量，<link rel="preload" href="/fonts/<code>theme.woff2"> 是无效的）
典型合规用法：<link rel="preload" href="/assets/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>；反例：<link rel="preload" href="/js/chunk-<code>hash.js" as="script"> —— 这类资源应靠 modulepreload 或 preconnect + 正确 chunk 分割来优化。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
preload 和 prefetch/preconnect 别混用
三者语义和时机完全不同，混用等于主动放弃浏览器调度权：
-
preload：强制“现在就下载这个资源”，用于当前导航的关键依赖 -
prefetch：提示“用户**可能**下个页面需要这个”，由浏览器按空闲时机决定是否获取（适合下一跳的 JS chunk） -
preconnect：只建立 DNS + TCP + TLS 连接，不传资源体，适合跨源 CDN 域名（如<link rel="preconnect" href="https://cdn.example.com">）
常见错误：<link rel="preload" href="https://fonts.googleapis.com" as="style"> —— 这既不是字体也不是样式文件，而是 HTML，as="style" 让浏览器直接丢弃该请求；正确做法是 preconnect + dns-prefetch。
上线前必须验证的三件事
别只看 Lighthouse 分数。打开 Chrome DevTools → Network 面板，勾选 “Disable cache”，然后刷新页面，重点观察：
- 所有
preload请求是否都出现在 Waterfall 最顶部？有没有比document解析还晚才发起的？（说明插入位置错了） - 对应资源是否在后续又重复发了一次请求？（检查是否和
img/script标签 URL 完全一致） - 点开某个
preload请求的 Initiator，是不是显示parser？如果不是（比如是other或脚本插入），说明它没走预加载通道，只是个普通link
真正难的不是加 preload，而是持续判断某条 preload 在当前 bundle 版本、CDN 缓存状态、用户设备网络类型下是否依然必要——它是个需要定期 review 的运维项，不是写一次就完事的配置。
