根本原因是preload只下载不解析css：rel="preload" + as="style"仅预加载文件，必须通过onload回调将rel改为stylesheet才能触发cssom构建，且需配套stylesheet link、正确as值及noscript降级。
preload引入CSS后样式不生效，根本原因只有一个：浏览器压根没把它当样式用——rel="preload"只下载，不解析、不挂载、不参与 CSSOM 构建。
为什么rel="preload" + as="style"还是白屏
写了<link rel="preload" href="main.css" as="style">，Network里能看到200，但页面就是没样式。这不是缓存或路径问题，是语义误解：preload的定位就是“提前拉下来放内存里”，它不触发任何样式解析流程。你得手动把它“激活”进样式系统。
-
onload回调必须写，且要立即把rel改成stylesheet，否则资源永远躺在缓存里不动 -
this.onload=null必须放在onload第一行，否则 SPA 路由复用节点时可能重复执行，抛DOMException: Failed to set the 'rel' property - 不能只靠这一个
<link>——必须保留或动态插入一个配套的<link rel="stylesheet">，否则 CSSOM 构建不全，页面卡在无样式状态
as值填错或漏掉会怎样
填as="stylesheet"、as="css"甚至空着，浏览器不会报错，但会静默降级成普通资源加载：请求头Accept发的是*/*而不是text/css，优先级不提升，HTTP缓存无法复用，Network面板里看响应头Content-Type可能是text/plain，直接被浏览器拒绝解析。
- CSS 必须严格写
as="style"（不是stylesheet，也不是css） - 字体必须配
as="font"+crossorigin（无值），否则 CORS 失败且无 fallback，表现为 FOIT - 验证方式：DevTools → Network → 找目标请求 → Headers → 确认
Accept: text/css和响应头Content-Type: text/css是否匹配
非关键 CSS 加了 preload 反而更慢
不是preload本身拖慢，而是被预加载的 CSS 文件内部藏着隐性阻塞源。一旦它被onload注入为stylesheet，里面藏着的@import、未优化的@font-face、大尺寸background-image会立刻触发二级请求，挤占首屏带宽。
-
@import是同步阻塞的，必须全部替换为并行的<link rel="stylesheet"> - 字体要单独
preload，且路径、crossorigin、as="font"三者全部对齐，否则即使 CSS 里写了@font-face，字体也得等 CSS 解析完才开始拉 - 非关键 CSS 中的大图建议改用
<img loading="lazy">或设font-display: optional，避免样式一挂载就抢带宽
<noscript></noscript>降级不是可选项
IE 全系、部分老 WebView 完全忽略preload，Safari 11.1+ 和 Chrome 50+ 支持，但不加<noscript></noscript> fallback 就等于主动放弃这些用户——页面直接白屏。
- 正确写法必须带
<noscript><link rel="stylesheet" href="main.css"></noscript> - 别用
document.write或appendChild动态插入<link>，可能阻塞渲染或触发重排 -
preload只对「当前导航中马上要用」的资源有效，非关键 CSS 或跨页资源用prefetch，别混用
真正容易被忽略的点是：preload 后的 onload 注入时机依赖资源完整下载，但若服务器返回了错误 MIME 类型（比如Content-Type: text/plain），即使onload触发了，this.rel = 'stylesheet'也会静默失败——此时 Network 面板里请求状态仍是200，但 Computed 样式里完全找不到你的规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
