preload 是浏览器提前获取资源的声明式提示，仅影响获取时机而不触发执行；它不是 script 替代品或 HTML 加速按钮，必须带 as 属性指定资源类型以确保正确优先级和复用。
preload 是什么，不是什么
它不是 <script> 的替代品，也不是让 HTML 加载更快的“加速按钮”。preload 是浏览器提前获取资源的声明式提示，仅影响资源获取时机，不触发执行（比如 JS 不会运行，CSS 不会解析，字体不会应用）。你写了 <link rel="preload">，浏览器就去下载；但没写，它可能等到解析到 <script src> 或 <link rel="stylesheet"> 才开始拿——这时候就晚了。
常见错误现象：preload 了 JS 却没加 as="script"，结果浏览器按 fetch 优先级处理，实际和普通请求差不多；或者预加载了字体但没配 crossorigin，导致重复下载。
必须带 as 属性，否则大概率失效
as 告诉浏览器“这个资源将来怎么用”，直接影响优先级、CSP 校验、缓存策略。漏掉它，浏览器只能当 fetch 处理，失去预加载意义。
-
<link rel="preload" href="main.js" as="script">→ 按脚本优先级抓取，进 script 缓存池 -
<link rel="preload" href="style.css" as="style">→ 触发 CSS 解析准备，避免阻塞渲染 -
<link rel="preload" href="icon.woff2" as="font" type="font/woff2" crossorigin>→ 字体必须带crossorigin，否则加载后会被丢弃重拉
注意：as="image" 对 <img> 无效，因为 img 是懒加载默认行为；真正该预加载的是关键 hero 图的 src，且得配合 fetchpriority="high"（现代浏览器）。
立即学习“前端免费学习笔记（深入）”；
别 preload 所有东西，重点盯住渲染阻塞链
预加载不是越多越好。浏览器并发连接有限，瞎 preload 会挤占真正关键资源的带宽和解析时间。只对「首次渲染必需、当前 HTML 里还没自然声明」的资源下手。
- 首屏必需的内联 CSS 后紧跟着的外部
style.css - 在
<body>底部才出现的app.js，但它是渲染首屏组件的入口 - 通过 JS 动态 import 的核心模块（此时要用
as="script"+onload手动挂载）
反例：preload 一个埋点 SDK、一个非首屏轮播图的图片、一个主题切换用的备用 CSS——这些都会拖慢真正要紧的东西。
检查是否生效，别信“写了就起作用”
打开 Chrome DevTools → Network 面板，刷新页面，筛选 Initiator 列为 preload 的请求。如果没看到，或看到状态是 (blocked:other)，说明出问题了。
- 路径写错（比如少个
/，或用了相对路径但 HTML 在子目录）→ 检查href是否 404 - HTTP/2 Server Push 已启用 → preload 会被忽略（Push 优先级更高，但更难控制）
- 资源被 Service Worker 拦截但没正确处理 preload 请求 → 查看 SW 的
fetch事件逻辑
最易被忽略的一点：preload 的资源必须和最终使用它的标签保持完全一致的 href（包括查询参数）、as、crossorigin。哪怕多一个 ?v=1，浏览器也认为是不同资源，不会复用。
