rel="preload"能抢出400–800ms，因其在<head>解析初期即发起请求，与HTML解析并行；而<script>需等解析完成才触发下载，此时网络常已被其他资源占用，导致首屏JS排队延迟。

rel="preload" 必须用在 SPA 首屏主 Bundle 上，否则下载会晚 400–800ms；但它不是万能药，错配 as、漏写 integrity、混用 modulepreload 或硬编码带 hash 的路径，都会让优化失效甚至变负优化。

为什么 rel="preload" 能抢出 400–800ms

浏览器解析 HTML 时，<link rel="preload" href="main.js" as="script"> 在 开头就被扫描并立即发起请求，和 HTML 解析并行；而 <script type="module" src="main.js"></script> 要等整个 解析完、遇到该标签才触发下载——此时网络可能已被 CSS、字体占满，首屏 JS 下载被迫排队。

• 实测中，3G 网络下 main.js 的 Start Time 可提前 400–800ms
• 必须放在 最早位置，早于所有 <script></script> 和 <link rel="stylesheet">
• 不能用 <script src="main.js"></script> 替代——它会阻塞 HTML 解析，且无法控制优先级

as="script" 是硬门槛，不是可选项

漏写或写错 as 属性，rel="preload" 就等于没写：Chrome Network 面板里 Priority 显示为 Low，和普通 fetch 无异；更糟的是，后续 <script src="main.js"></script> 仍会重新发起一次请求，造成重复下载。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 必须写 as="script"，不能是 as="fetch"、as="module" 或留空
• 如果主入口是 type="module" 且带 integrity（如 integrity="sha256-..."），则 preload 标签也必须带完全相同的 integrity 值，否则缓存不复用
• 服务端返回的 MIME 类型必须是 application/javascript，Safari/Edge 否则可能拒绝执行

用 rel="modulepreload" 还是 rel="preload"？看模块加载方式

如果你的 main.js 是 ES 模块（type="module"），且内部有静态 import 链（比如 import { render } from './core.js'），只用 rel="preload" 不够：它只下载 main.js，子模块仍要等解析后才请求，多轮 RTT 延迟明显。

立即学习“前端免费学习笔记（深入）”；

• 改用 <link rel="modulepreload" href="main.js">：它会预解析 main.js 并递归预取所有静态 import 的依赖（如 core.js、router.js）
• modulepreload 不允许加 as 属性，加了会被忽略
• href 必须和 import() 或 type="module" 中写的路径完全一致（包括查询参数，如 ?v=1.2）
• 多个 modulepreload 标签之间无顺序依赖，但必须全部出现在首个模块脚本之前

构建产物路径变动会让 preload 失效

Webpack/Vite 默认给 JS 文件加 hash（如 app.a1b2c3.js），每次构建路径都变，导致 rel="preload" 缓存失效、重复下载，甚至 404。

• 对首屏关键 Bundle，建议禁用 hash 或固定文件名（如 main.js）
• 或通过构建插件将真实路径注入 HTML 模板：Vite 可配 build.rollupOptions.output.entryFileNames；Webpack 可配 output.filename + HtmlWebpackPlugin 动态注入
• 绝对不要在 HTML 中硬编码带 hash 的路径，上线后 preload 指向 404
• rel="preload" 只对当前页有效，页面跳转后预加载即终止，缓存也不跨会话复用——想预加载下一页资源，必须用 rel="prefetch"