rel="preload" + as="style" 仅提前下载CSS，需配合onload切换rel为stylesheet才能应用，否则导致FOUC；三要素缺一不可，且路径、type、Content-Type须严格一致方可复用缓存。
rel="preload" + as="style" 能提前拉取 CSS，但不等于首屏就快
它只解决“下载早”，不解决“应用早”。浏览器拿到 CSS 后不会自动解析或应用，必须手动触发切换 rel 才能参与渲染。漏掉这步，资源白下、FOUC（样式闪烁）照旧。
as="style" 必须配 onload 切换 rel，否则只下载不生效
常见错误是只写 <link rel="preload" href="main.css" as="style">，结果 CSS 下载完却卡在缓存里。正确写法要三要素齐全：
-
rel="preload"告诉浏览器高优下载 -
as="style"确保进 CSS 缓存池、Priority 显示 High -
onload="this.onload=null;this.rel='stylesheet'"在下载完成瞬间转为可解析样式表
少任何一个，都可能重复请求或延迟渲染。特别注意 this.onload=null——旧版 Safari 会多次触发 onload，导致样式表被反复挂载。
路径和 type 必须严格一致，否则缓存不复用
预加载和后续实际使用的 <link rel="stylesheet">（如有）必须完全匹配：
立即学习“前端免费学习笔记（深入）”；
- href 字符串完全相同（
/css/main.css≠css/main.css） - 若用了
type="text/css"，预加载也得带上，否则 Chrome 可能拒绝复用 - 服务端返回的 Content-Type 必须与
type属性一致，比如返回text/css却声明type="application/css"，缓存失效
验证方式：DevTools Network 面板中筛选 Initiator: preload，看 Priority 是否为 High；再查该资源是否被后续样式表复用（Size 列显示 from memory cache）。
别对已内联的关键 CSS 或 @import 文件用 as="style"
内联 <style> 不需要 preload；而 @import 是串行阻塞行为，preload 它只会提前下载一个依赖入口，无法跳过解析等待。真正该 preload 的是：
- 首屏必需、但被藏在
@import后面的主样式文件（如theme.css） - 由 JS 动态插入、且影响首屏布局的样式表（如主题切换后立即生效的 dark.css）
- 通过
<link rel="stylesheet" media="print" onload="...">延迟加载的非关键 CSS，若某次需提前激活，可用 preload 提前拉取
最容易被忽略的是：preload 的 CSS 若体积过大（比如超过 14KB），仍会拖慢 TTFB 和首屏解析——它只是把阻塞点从“下载”挪到了“解析”，没解决根本问题。
