rel="preload"不加as="style"等于没写，因浏览器依赖as属性决定优先级、缓存和CORS策略，漏写或错写会导致降级为低优fetch；必须配as="style"和onload="this.onload=null;this.rel='stylesheet'"才能生效，且需noscript降级保障兼容性。
rel="preload"不加as="style"等于没写
写了 rel="preload" 但 CSS 没提速，八成是漏了 as="style"。浏览器靠 as 决定请求优先级、缓存分区和 CORS 策略——不写或写错（比如写成 as="fetch"），它就当普通低优 fetch 处理，Network 面板里 Priority 显示 Low，和没加一样。
必须严格匹配资源类型：
-
as="style"→ 仅用于 CSS 文件，且后续必须配合 onload 切换rel -
as="font"→ 必须同步加crossorigin，否则同域字体也会被丢弃 -
as="script"→ 若后续有<script src>引同一 URL，能复用缓存；但若带integrity，preload 也得带上，否则不匹配
只 preload 不切换 rel，CSS 永远不生效
rel="preload" 的语义是“提前取货”，不是“立刻上架”。哪怕 critical.css 已下载完成，只要 rel 还是 preload，浏览器就不会解析规则、不会参与渲染——页面照样白屏或错乱。
正确做法是内联 onload 并立即清除回调：
立即学习“前端免费学习笔记（深入）”；
-
onload="this.onload=null;this.rel='stylesheet'"是最小可行写法 -
this.onload=null必须写在最前，防止 Safari 或某些 Service Worker 场景下重复触发，导致样式闪烁 - 别写成外部函数调用（如
onload="loadCSS()"），增加执行延迟和作用域风险 - 不要额外再写一个
<link rel="stylesheet" href="critical.css">，否则 Chrome 会发起两次请求（尤其路径稍有差异时）
必须配 <noscript> 降级，否则老浏览器直接白屏
Safari 11.1+、Chrome 50+ 支持 preload，但 IE 全系、部分 Android WebView 完全忽略它。如果只靠 preload + onload，无 JS 环境下样式彻底丢失。
降级方案必须写在 <head> 里，且紧随 preload 标签之后：
<noscript><link rel="stylesheet" href="/css/critical.css"></noscript>- 路径必须和 preload 的
href完全一致（包括查询参数，main.css?v=1.2和main.css?v=1.3视为不同资源） - 别用
document.write或动态appendChild插入，可能阻塞渲染或被浏览器忽略
验证是否真生效，别只看 Network 面板
Network 里看到 critical.css 有 200 并不等于它起了作用。关键看三处：
- Elements 面板中找到对应
<link>，确认rel已变成stylesheet（不是还卡在preload） - Performance 面板录制首屏加载，对比 Stylesheets 解析时间是否明显前移
- 禁用 JavaScript 后刷新，确认页面仍有基础样式——否则
<noscript>降级失败
最容易被忽略的是：preload 只对「当前导航中马上要用」的资源有效。把 print.css 或暗色模式样式也 preload，不仅无效，还会抢带宽、挤占关键资源连接池。
