预加载仅对明确会用且加载时机晚于需求的资源有效，需配合正确as属性、cors及font-display等；误用会浪费带宽或阻塞首屏，应依使用路径严格甄别。
预加载不是万能的，它只对明确知道会用到的资源有效
HTML 的 <link rel="preload"> 本身不提升页面整体性能，它只是把某个资源“提前拉下来”，但不会改变资源的执行时机或渲染逻辑。如果你预加载了一个用户根本不会触发的 JS，或者在首屏之后才显示的图片，那只是白占带宽、增加 HTTP 请求开销。
真正起效的前提是：资源有明确的使用路径，且加载时机晚于实际需要时间（比如某个 IntersectionObserver 触发后才动态 import 的模块）。这时候预加载才能补上网络延迟缺口。
- 适合预加载：关键字体（
font-display: optional配合）、首屏 Hero 图、即将播放的视频封面、核心路由组件对应的 JS chunk - 不适合预加载：所有
defer或async的第三方统计脚本、用户行为未触发前的模态框资源、未做 code-splitting 的巨型 bundle - 注意：预加载的资源仍受同源策略和 CORS 限制，
crossorigin属性漏写会导致字体/字体图标加载失败但无报错
preload 和 prefetch 容易混用，但语义和时机完全不同
<link rel="preload"> 是强制、高优先级、当前导航生命周期内必须加载；而 <link rel="prefetch"> 是低优先级、浏览器空闲时才尝试加载、用于下一次导航（比如从首页预取商品页的 JS）。
常见错误是把本该 prefetch 的资源写成 preload，导致首屏渲染被阻塞——尤其是预加载一个 500KB 的 JS 文件，即使它标记了 as="script"，浏览器依然会以高优先级发起请求，可能挤占 CSS/JS 解析带宽。
- 判断依据：这个资源是否在当前页面“马上就要用”？是 →
preload；否 →prefetch或preconnect -
as属性必须准确填写，否则浏览器无法设置正确 MIME 类型和优先级，比如as="fetch"用于POSTAPI 的 JSON 接口，as="image"用于<img>源 - Chrome DevTools 的 Network 面板里看
Initiator列，能确认是否真由 preload 触发，而非 JS 动态创建
字体预加载必须配合 font-display，否则可能造成 FOIT 或隐藏文本
只写 <link rel="preload" as="font" type="font/woff2" crossorigin> 不够。如果 CSS 中字体定义没加 font-display，浏览器仍会阻塞文本渲染直到字体加载完成（FOIT），预加载反而放大了白屏感。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
必须组合使用：font-display: swap（推荐）或 font-display: optional，让文本先用系统字体渲染，等预加载字体就绪后再替换。
- WOFF2 格式必须声明
crossorigin，哪怕同源，否则 Chrome 会拒绝应用该字体 - 不要预加载所有字体变体（bold/italic），只预载首屏实际用到的 weight-style 组合，比如只用 Regular 和 Bold，就只 preload 这两个
- 通过
@font-face的unicode-range拆分字体子集后，预加载也需对应拆分，否则加载冗余字形
服务端推送（HTTP/2 Server Push）已淘汰，别再依赖它替代 preload
HTTP/2 Server Push 在主流浏览器中已被移除（Chrome 96+、Firefox 93+），现在所有“推送”行为都退化为普通请求。如果你还在 Nginx 或 CDN 后台配置了 http2_push，它不会生效，反而可能因资源重复发送引发缓存混乱。
唯一可控的预加载方式只剩 HTML 中的 <link rel="preload"> 或 HTTP 响应头 Link: ; rel=preload; as=style。后者虽支持，但 header 写法难调试、难按路径条件控制，不如 HTML 内联直观。
- 响应头方式需确保服务器支持且未被中间代理（如某些企业防火墙）过滤
Link头 - Webpack/Vite 等构建工具生成的 preload，要注意
chunks分割粒度，避免把公共 vendor chunk 错误地多次 preload - 移动端弱网下，预加载大资源反而可能因超时中断，建议结合
netinfo.effectiveType做降级：比如effectiveType === 'slow-2g'时跳过图片 preload
预加载真正难的不是写那行 <link>，而是判断“这个资源到底会不会被用、什么时候用、用不用得上”。很多项目上线后发现预加载没效果，问题往往出在资源使用路径不可预测，或者监控没跟上——比如动态 import 的 chunk 名变化了，但 preload 的 href 没同步更新，结果预加载了个 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
