CSS拆分本身不导致闪烁，真正原因是首屏关键样式未在渲染前就位：异步加载的CSS不阻塞HTML解析，预加载器不可见；@import串行加载、外链主题变量延迟、preload未正确回填及交付时机失控均会引发闪烁。
CSS代码拆分本身不会直接导致闪烁，真正触发闪烁的是拆分后关键样式没在首屏渲染前就位——尤其是当拆分策略把首屏必需的规则放到了异步加载的文件里。
拆分后没进HTML阻塞链，浏览器直接跳过渲染等待
现代构建工具（如Vite、Webpack）默认把CSS按路由或组件拆成多个chunk.css，再通过import或动态import()注入。问题在于：这些<link rel="stylesheet">是JS运行时插入的，预加载器根本看不到，浏览器不会把它纳入“parser-blocking”资源列表。
- DevTools → Network → 筛选
css→ 看Initiator列：如果是script或other，说明没阻塞HTML解析，首屏必然闪 - 哪怕你把
<link>手动写进，只要media值不匹配（比如media="(min-width: 768px)"在手机上），浏览器也照样跳过阻塞 - @import在拆分后的CSS里出现，会强制串行加载：A.css解析完才发起B.css请求，首屏样式链直接断裂
主题/响应式变量依赖外链CSS，首帧fallback失效
如果深色模式靠:root里定义--bg-color，而这个变量定义在theme-dark.css里，那HTML首次渲染时--bg-color还是未定义状态。即使JS立刻检测prefers-color-scheme并加data-theme，CSS变量已计算完毕，var(--bg-color, #fff)里的#fff fallback也只撑到变量加载前那一帧——之后重绘仍会闪。
- 变量定义必须内联在
<style></style>里，且放在最顶部；外链CSS里的:root声明等于“延迟交付” - 只写
@media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } }不够，必须同步配[data-theme="dark"] { --bg: #1a1a1a; }，否则首帧无变量可读 - 第三方UI库（如Ant Design）的主题JS注入逻辑，和你的外链CSS加载时机天然不同步，容易覆盖或被覆盖
拆分后非关键CSS用rel="preload"但漏了onload回填
有人想“优化”：把所有CSS都preload，以为能提前拉取。但<link rel="preload" as="style">只是下载，不解析不应用。如果没写onload="this.rel='stylesheet'"，样式永远不会生效；如果写了但没清空onload句柄（this.onload=null），可能重复执行；如果没加<noscript></noscript>兜底，禁用JS时整个样式表就丢了。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<link rel="preload" href="main.css" as="style">—— 缺onload，样式永远不挂载 - 危险写法：
onload="this.rel='stylesheet'"—— 第二次加载时this.rel已是stylesheet，再赋值会触发重解析，可能造成回流 - 必须写：
<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="critical.css"></noscript>
最易被忽略的一点：拆分不是目的，控制交付时机才是。哪怕只拆出1KB的critical.css，如果它没内联、没阻塞、没在顶部，照样闪；而一个20KB的单文件，只要满足内联+无media+顶部<style></style>，反而稳如磐石。
