preload预加载CSS必须配as="style"且不能省略，否则降级为Low优先级；需用onload切换rel="stylesheet"并确保href路径完全一致，且须置于<head>最前。
preload预加载CSS必须配as="style"且不能省略
只写 <link rel="preload" href="main.css"> 是无效的——浏览器根本不会把它当预加载处理，Priority 会显示为 Low，和普通请求没区别。关键就卡在漏掉 as 属性。as="style" 不是可选项，它告诉浏览器：“这是 CSS，按 text/css 的 Accept 头发请求，进 CSS 缓存池，后续 <link rel="stylesheet"> 能复用”。漏了或写成 as="fetch"，等于白写。
预加载后CSS不会自动生效，得靠onload切换rel
preload 只下载不解析，所以必须手动触发应用。最稳妥写法是：
<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
注意三点：
• 必须加 this.onload=null，否则缓存命中时可能重复执行；
• href 值要和后面可能存在的其他 <link rel="stylesheet"> 完全一致（包括协议、路径斜杠、查询参数），否则浏览器不复用缓存；
• 这行必须放在 <head> 里，越靠前越好，最好紧贴 <meta charset> 后面。
别把preload当异步加载方案，关键CSS仍建议内联
如果你的目标是消除渲染阻塞、提升 FCP，仅靠 preload + onload 切换仍有风险：
• onload 触发只代表 HTTP 响应完成，不代表 CSSOM 已构建完毕，DOM 操作可能仍取不到样式；
• Safari 对 onload 的触发时机更保守，有时延迟明显；
• IE 完全不支持 preload，无降级逻辑就会白屏。
立即学习“前端免费学习笔记（深入）”；
真正稳的组合是：
• 首屏必需的最小 CSS（通常 ≤14KB）直接内联进 <style>；
• 剩余非关键 CSS 用 <link rel="stylesheet" media="print" onload="this.media='all'"> 异步加载；
• preload 仅作为对内联 CSS 之外、但又必须早于 JS 执行的那部分样式（比如模块化 JS 依赖的 shared.css）的增强手段。
验证是否真起作用，别只看HTML有没有那行
打开 Chrome DevTools → Network 面板，筛选目标 CSS 文件，重点看：
• Initiator 列是否为 preload（不是 parser 或 script）；
• Priority 是否为 High（as="style" 应该是 High，as="font" 才是 Highest）；
• Time 列的 Start Time 是否比未加 preload 时提前 200–600ms；
• 如果看到 Size 是 0 B 或状态为 canceled，检查是否启用了 HTTP/2 Server Push，它会覆盖 preload 行为。
最容易被忽略的是：preload 的 href 和后续实际使用的 <link rel="stylesheet"> 路径哪怕差一个 /，浏览器也认为是不同资源，导致二次下载。
