加了rel="preload"却没提速，八成是漏了as="style"或onload切换逻辑；浏览器依赖as属性决定优先级、缓存和CORS策略，不写或写错则降级为低优fetch，且必须配合onload="this.onload=null;this.rel='stylesheet'"才能解析应用。
加了 rel="preload" 却没提速？八成是漏了 as="style" 或没写 onload 切换逻辑——浏览器根本不会解析它，只当普通低优 fetch 处理。
为什么 rel="preload" 不加 as="style" 就等于没写
浏览器靠 as 属性决定请求优先级、缓存分区和 CORS 策略。不写或写错（比如 as="css" 或 as="fetch"），它就按最低优先级发起请求，Network 面板里 Priority 显示 Low，和没加一样。
-
as="style"是强制要求，不是可选项 - 路径必须准确：相对路径以当前 HTML 为基准，别依赖 base 标签
- 如果 CSS 里引用了跨域字体或图片，
as="style"本身不解决 CORS，但它是触发正确请求头的前提
onload="this.onload=null;this.rel='stylesheet'" 为什么不能省
rel="preload" 的语义是“提前取货”，不是“立刻上架”。哪怕文件已下载完成，只要 rel 还是 preload，浏览器就不会解析规则、不参与渲染——页面照样白屏或 FOUC。
-
this.onload=null必须写在最前，防止 Safari 或某些 Service Worker 场景下重复触发，导致样式闪烁 - 别写成外部函数调用（如
onload="loadCSS()"），增加执行延迟和作用域风险 - 不要额外再写一个
<link rel="stylesheet" href="...">，否则 Chrome 会发起两次请求（尤其路径稍有差异时）
必须配 <noscript> 降级，否则老浏览器直接白屏
Safari 11.1+、Chrome 50+ 支持 preload，但 IE 全系和部分老 WebView 完全忽略它。没有降级方案，用户看到的就是无样式的白屏或错乱页。
立即学习“前端免费学习笔记（深入）”；
-
<noscript><link rel="stylesheet" href="critical.css"></noscript>不是可选项 - 标签必须写在
<head>里，且顺序不能错：先preload，再noscript - 动态插入的
<link>（比如 JS 创建后 append）放在<body>后可能被浏览器忽略
真正起效的关键不在标签写了几个，而在是否同时满足：as="style" + onload 切换 + noscript 降级。漏掉任意一环，预加载就只是个空转的 fetch 请求。
