preload本身不解析CSS，只下载不挂载，必须配合as="style"、onload切换rel为stylesheet及降级才能生效；填错as值或缺失会导致静默降级，CSSOM无法构建。
preload 本身不解析 CSS，只下载不挂载
这是最根本的原因。rel="preload" 的语义就是“提前拉取资源”，浏览器不会对它做任何解析、不构建 CSSOM、不应用样式。哪怕你写了 as="style"，也仅提升优先级和缓存复用能力，完全不影响渲染流程。页面白屏或无样式，八成卡在这一步。
常见错误写法：<link rel="preload" href="main.css" as="style"> —— 这行代码等同于“默默下个文件”，对样式生效零贡献。
- 必须配套一个动态或静态的
<link rel="stylesheet">才能触发解析和挂载 -
onload回调里切换rel是最常用手段，但必须确保该<link>节点最终变成rel="stylesheet" - 若 JS 执行失败（如被阻塞、报错、被禁用），样式就永远不生效；所以必须配
<noscript></noscript>降级
as="style" 写错或缺失导致静默降级
填错 as 值（比如 as="stylesheet"、as="css" 或直接省略）不会报错，但会触发静默降级：请求头 Accept 不是 text/css，服务端可能返回错误 MIME 类型，浏览器拒绝执行后续 onload，甚至不进缓存。
验证方式：DevTools → Network → 找目标请求 → Headers → 检查 Accept: text/css 和响应头 Content-Type: text/css 是否匹配。
-
as必须严格为style（不是stylesheet，也不是css） - 字体要单独
preload，且必须配as="font"+crossorigin（值为空即可），否则即使 CSS 里写了@font-face，字体也得等 CSS 解析完才开始拉 -
as="font"缺crossorigin会导致 CORS 失败，表现为 FOIT（空白字体），无 fallback
preload 后没触发 onload 或 rel 切换失败
onload 回调不执行，或执行了但 rel 没成功设为 stylesheet，样式照样不生效。常见原因包括：
-
this.onload=null没写在最前 → SPA 路由复用节点或用户刷新时可能重复执行，触发DOMException: Failed to set the 'rel' property - JS 被阻塞（如前面有同步长任务）、或执行环境异常（如 strict mode 下 this 指向不对）
- 服务器返回非
text/cssMIME 类型（如text/plain或text/html），浏览器直接拒绝解析，onload不触发 - 路径 404 或跨域失败 → 控制台报
net::ERR_ABORTED，后续rel切换逻辑根本不会跑
非关键 CSS 加 preload 反而拖慢首屏
preload 本身不慢，但加载的 CSS 文件内部藏着隐性阻塞源，会让首屏更卡：
-
@import是同步阻塞的，必须全部替换为并行的<link rel="stylesheet"> - CSS 里含未优化的
@font-face或大图background-image→ 样式一挂载就触发二级请求，挤占首屏带宽 - preload 了不该 preload 的文件（如
print.css、暗色模式 CSS、路由级懒加载 CSS）→ 白占并发连接数（Chrome 默认限 6 个） - 真正该 preload 的只有首屏强依赖的 CSS：重置样式、基础布局、关键组件（
header.css、hero-banner.css）
最容易被忽略的是：CSS 文件是否真的“干净”——没有 @import、没嵌套大图、字体已单独 preload 并对齐路径与 crossorigin。否则 preload 只是把问题从“慢”变成“更隐蔽的慢”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
