HTML预加载仅改变资源加载时机，不直接优化性能；需精准选择关键资源（如首屏CSS/JS/图片）、正确设置as值、避免误preload非关键资源，并配合体积压缩等基础优化。
HTML 预加载（<link rel="preload">）本身不优化资源，它只改变加载时机；真正影响优化效果的是你 preload 了什么、什么时候 preload、以及是否和实际渲染路径匹配。
preload 用错资源类型反而拖慢首屏
常见错误是把非关键资源（比如整页 JS、非首屏图片、字体文件）盲目 preload，导致浏览器提前抢占带宽和解析资源，挤占真正关键资源（如首屏 CSS、主脚本）的下载优先级。
- 只对「当前导航中立即需要」的资源使用
preload：例如首屏 Hero 图的<img>对应的src地址、内联前必须执行的critical.js、或阻塞渲染的main.css - 避免 preload 字体文件（
font），除非你用font-display: optional且已通过<link rel="preload" as="font">显式声明加载——否则可能触发两次请求（preload + @font-face） - 不要 preload
async或defer脚本：它们本就不阻塞，preload 只会提前下载却延迟执行，浪费内存和连接
preload 的 as 值必须严格匹配资源类型
浏览器靠 as 值决定如何预加载：分配连接、设置 MIME 类型校验、应用缓存策略。写错会导致请求被忽略或降级为普通 fetch。
- JS 文件必须写
as="script"，不能写as="fetch"或留空 - CSS 必须写
as="style"，写成as="text/css"无效 - 图片用
as="image"，并确保type属性（如type="image/webp"）与服务端实际返回的 Content-Type 一致，否则可能被丢弃 - 音频/视频资源需配
as="audio"/as="video"，且建议加crossorigin（尤其 CDN 场景）
动态内容或条件渲染下 preload 容易失效
服务端渲染（SSR）或静态生成（SSG）时硬编码 <link rel="preload"> 没问题，但客户端路由（如 React Router、Vue Router）切换页面后，新页面的 preload 标签不会自动注入，首屏资源仍按默认优先级加载。
立即学习“前端免费学习笔记（深入）”；
- SPA 中推荐改用
document.createElement('link')+rel="preload"在组件挂载时动态插入，但注意仅在首次渲染时执行（避免重复） - 若用 Webpack/Vite，可通过
import()动态导入配合/* webpackPreload: true */（Webpack）或/* @vite/preload */（Vite）让构建工具自动生成对应 preload 标签 - 检查 Network 面板的 Initiator 列：如果 preload 请求显示为
Other而非Parser，说明该标签未被 HTML 解析器识别——大概率是位置放错（比如写在<body>后）或语法错误（缺少as）
最常被忽略的一点：preload 不解决资源体积问题。哪怕你精准 preload 了一个 2MB 的 WebP 图片，它依然会卡住首屏。真正的优化要先做资源裁剪（尺寸、格式、压缩）、再决定是否 preload——顺序错了，一切白搭。
