preload 必须写在 HTML 的 <head> 中且为静态路径，动态插入、错误 as 值、漏 crossorigin、非首屏资源滥用均导致失效；它仅下载不执行，仍需正常引入才能生效。
preload 必须写在 <head> 里，动态插入无效
浏览器只在 HTML 解析早期处理 <link rel="preload">，一旦解析完成（比如 DOMContentLoaded 后），再用 document.createElement('link') 插入，Chrome、Firefox 都会直接忽略——它不会发起请求，也不报错，只是静默失效。
常见错误场景：
- 在 React/Vue 组件
useEffect或mounted钩子中插入 preload 标签 - 根据 AB 实验结果拼接 URL 后再注入
<link> - 用
innerHTML往<head>追加（部分旧版 Safari 会解析，但行为不可靠）
正确做法：服务端渲染时生成，或在 HTML 模板最顶部硬编码。若必须运行时控制，改用 Image 对象或 fetch() + cache.put()。
as 属性填错等于没写，字体漏 crossorigin 直接被跳过
as 不是可选参数，而是浏览器判断如何加载的关键开关。填错类型会导致请求头错误、缓存隔离、甚至跨域拒绝。
立即学习“前端免费学习笔记（深入）”；
典型配对必须严格匹配：
- CSS 文件 →
as="style"（不是"stylesheet"） - Web 字体 →
as="font"+crossorigin（即使同源也必须加） - 图片 →
as="image"（as="fetch"会绕过图片解码优化） - JS 模块 →
as="script"（注意：不执行，后续仍需<script src>）
漏掉 crossorigin 的字体 preload，在 Chrome 和 Safari 中会被完全忽略，FOIT 问题照旧。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
不要对懒加载图片或路由异步 chunk 用 preload
preload 的语义是“当前页马上就要用”，不是“以后可能会用”。把它用在非首屏资源上，只会抢带宽、挤占真正关键资源的优先级。
典型误用：
- 给
<img loading="lazy">的src再写一遍preload - 在首页
preload用户中心页的user.js（该用prefetch） - 对 Webpack
import('./module.js')动态导入的 chunk 做 preload
验证方法：打开 Chrome DevTools → Network → 刷新页面 → 看对应资源的 Initiator 列。如果是 preload，且时间戳落在 DOMContentLoaded 前 100ms 内，才算合理；如果显示为 script 或延迟很久才触发，说明放错了位置或时机。
href 必须是静态字符串，模板变量和表达式全都不生效
<link rel="preload" href="/assets/${name}.webp" as="image"> 这种写法在 HTML 中就是纯文本，浏览器不会执行 JS 模板解析，${name} 会被当字面量请求，结果是 404。
能用的只有：
- 绝对路径：
href="/logo.webp" - 根相对路径：
href="/images/banner.jpg" - 协议相对路径（慎用）：
href="//cdn.example.com/icon.svg"
如果你需要根据环境或用户设备动态选图（比如 DPR=2 时加载 @2x），只能放弃 <link>，改用 Image 对象 + srcset 逻辑，或由服务端输出最终 URL。
最常被忽略的一点：preload 只负责“下载”，不负责“使用”。预加载了 app.js，不代表它会自动执行；预加载了 main.css，也不代表样式会生效——你仍需正常引入 <script src> 或 <link rel="stylesheet">，浏览器才会复用已缓存的响应体。
