必须写在内且越靠前越好；动态插入无效；关键参数仅href、as、crossorigin；href须静态路径；as值错误（如字体漏crossorigin、css填错as）会导致静默失效；仅对首屏立即需要的资源使用，避免滥用。

怎么在里写对 link rel="preload"

必须写在 里，且越靠前越好；浏览器只在 HTML 解析初期识别它，动态插入（比如 JS 创建 link 后 append）基本无效。常见错误是把它塞在 末尾，或者等 JS 执行完才加——这时 preload 已被忽略。

关键参数只有三个：href、as、必要时加 crossorigin。其他如 type、fetchpriority 是可选增强，不填也不报错，但填错会直接失效。

• href 必须是静态路径，不能含 JS 变量或模板字符串（例如 href="/js/app.${hash}.js" 会失败）
• as 不是提示，是强制声明：填 as="script"，浏览器才进 script cache；填错如 as="javascript"，标签被静默丢弃
• 字体必须加 crossorigin，哪怕同域——漏了 Safari 和 Chrome 都不加载

哪些资源该用 preload，哪些不该

只对「当前页面首屏立刻需要、且后续 HTML/CSS/JS 确实会用到」的资源用。不是所有 JS 或 CSS 都适合——预加载会抢占带宽，反而拖慢真正关键的渲染流程。

亿图脑图

亿图脑图是一款AI思维导图工具，万兴科技推出的跨端AI思维导图助手。

下载

• ✅ 推荐：/fonts/inter.woff2（首屏文字依赖）、/js/app.xxx.js（主入口脚本）、/images/hero.webp（首屏大图）
• ❌ 慎用：chunk-vendors.xxx.js（通常非首屏必需）、print.css（媒体不匹配）、懒加载模块的 JS（浏览器无法静态分析，preload 白发）
• ⚠️ 特别注意：不要对 rel="stylesheet" 的 CSS 再 preload as="style"——可能触发二次解析，改用 media="print" onload="this.media='all'" 更稳妥

as 值填错的典型表现和修复

填错 as 是最隐蔽的坑：控制台没报错，Network 面板里请求状态可能是 Pending 或直接消失，DevTools 的 Initiator 列显示为 (Other) 而非 Parser，说明浏览器根本没当 preload 处理。

• CSS 文件 → 必须 as="style"（不是 "stylesheet"）
• 字体（WOFF2/WOFF）→ as="font" + crossorigin，缺一不可
• JS 脚本 → as="script"；模块脚本也用这个，不用 type="module" 配合
• 图片 → as="image"；as="img" 或 as="picture" 全部无效
• JSON 接口数据 → as="fetch"，且响应需带 Access-Control-Allow-Origin（否则预加载失败）

验证 preload 是否真生效

别信代码写了就有效。打开 Chrome DevTools → Network → 刷新页面 → 找对应资源，看三件事：

• Initiator 列是否为 Parser（不是 Script 或 (Other)）
• Timing 标签页里 Start Time 是否明显早于同页面其他资源（尤其早于 DOMContentLoaded）
• Preview/Response 标签页能否看到内容（排除 404、重定向、缓存头 no-store 导致预加载结果无法复用）

如果资源返回 404 或服务端没配 Accept-Ranges: bytes（视频场景），preload 请求就算发出去了，浏览器也不会把结果用于后续真实请求——等于白干。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！