preload引入CSS后为什么样式没有应用

preload本身不解析CSS，只下载不挂载，必须配合as="style"、onload切换rel为stylesheet及<noscript>降级才能生效；填错as值或缺失会导致静默降级，CSSOM无法构建。

preload 本身不解析 CSS，只下载不挂载

这是最根本的原因。rel="preload" 的语义就是“提前拉取资源”，浏览器不会对它做任何解析、不构建 CSSOM、不应用样式。哪怕你写了 as="style"，也仅提升优先级和缓存复用能力，完全不影响渲染流程。页面白屏或无样式，八成卡在这一步。

常见错误写法：<link rel="preload" href="main.css" as="style"> —— 这行代码等同于“默默下个文件”，对样式生效零贡献。

1. 必须配套一个动态或静态的 <link rel="stylesheet"> 才能触发解析和挂载
2. onload 回调里切换 rel 是最常用手段，但必须确保该 <link> 节点最终变成 rel="stylesheet"
3. 若 JS 执行失败（如被阻塞、报错、被禁用），样式就永远不生效；所以必须配 <noscript> 降级

as="style" 写错或缺失导致静默降级

填错 as 值（比如 as="stylesheet"、as="css" 或直接省略）不会报错，但会触发静默降级：请求头 Accept 不是 text/css，服务端可能返回错误 MIME 类型，浏览器拒绝执行后续 onload，甚至不进缓存。

验证方式：DevTools → Network → 找目标请求 → Headers → 检查 Accept: text/css 和响应头 Content-Type: text/css 是否匹配。

1. as 必须严格为 style（不是 stylesheet，也不是 css）
2. 字体要单独 preload，且必须配 as="font" + crossorigin（值为空即可），否则即使 CSS 里写了 @font-face，字体也得等 CSS 解析完才开始拉
3. as="font" 缺 crossorigin 会导致 CORS 失败，表现为 FOIT（空白字体），无 fallback

preload 后没触发 onload 或 rel 切换失败

onload 回调不执行，或执行了但 rel 没成功设为 stylesheet，样式照样不生效。常见原因包括：

1. this.onload=null 没写在最前 → SPA 路由复用节点或用户刷新时可能重复执行，触发 DOMException: Failed to set the 'rel' property
2. JS 被阻塞（如前面有同步长任务）、或执行环境异常（如 strict mode 下 this 指向不对）
3. 服务器返回非 text/css MIME 类型（如 text/plain 或 text/html），浏览器直接拒绝解析，onload 不触发
4. 路径 404 或跨域失败 → 控制台报 net::ERR_ABORTED，后续 rel 切换逻辑根本不会跑

非关键 CSS 加 preload 反而拖慢首屏

preload 本身不慢，但加载的 CSS 文件内部藏着隐性阻塞源，会让首屏更卡：

1. @import 是同步阻塞的，必须全部替换为并行的 <link rel="stylesheet">
2. CSS 里含未优化的 @font-face 或大图 background-image → 样式一挂载就触发二级请求，挤占首屏带宽
3. preload 了不该 preload 的文件（如 print.css、暗色模式 CSS、路由级懒加载 CSS）→ 白占并发连接数（Chrome 默认限 6 个）
4. 真正该 preload 的只有首屏强依赖的 CSS：重置样式、基础布局、关键组件（header.css、hero-banner.css）

最容易被忽略的是：CSS 文件是否真的“干净”——没有 @import、没嵌套大图、字体已单独 preload 并对齐路径与 crossorigin。否则 preload 只是把问题从“慢”变成“更隐蔽的慢”。