直接切换link.href会闪屏，因浏览器需卸载旧样式再加载新CSS，产生无样式空白期；应预加载所有皮肤CSS并用disabled控制启用状态，避免网络请求与解析延迟。
为什么 link[rel="stylesheet"] 切换会闪屏
直接用 JavaScript 替换 <link> 的 href 属性，浏览器会先卸载旧样式、再加载新 CSS 文件——这中间存在空白期，DOM 已渲染但无有效样式，尤其在慢网或大 CSS 文件下更明显。不是 JS 执行慢，是浏览器样式表加载机制本身有 gap。
常见错误现象：Failed to load resource: net::ERR_ABORTED（切换太快导致前一个请求被 cancel）、布局抖动、文字短暂无样式显示。
- 别用
document.getElementById("theme-css").href = "dark.css"这种直切方式 - 别等
load事件再应用 body class——样式加载完成 ≠ 渲染完成 - 避免在
DOMContentLoaded后才开始加载皮肤 CSS，应提前预加载关键皮肤
用 disabled + 预加载避免卸载重载
核心思路：所有皮肤 CSS 都保持在 DOM 中，只通过 disabled 控制启用状态，完全绕过网络请求和解析延迟。
使用场景：中后台系统、支持明暗/高对比度/品牌色多皮肤的 Web 应用；CSS 文件体积不大（建议单个 ≤ 150KB）。
立即学习“前端免费学习笔记（深入）”；
- HTML 中一次性引入全部皮肤：
<link id="theme-light" rel="stylesheet" href="light.css">、<link id="theme-dark" rel="stylesheet" href="dark.css" disabled> - 切换时只改
disabled属性：document.getElementById("theme-light").disabled = true、document.getElementById("theme-dark").disabled = false - 确保各皮肤 CSS 内部不依赖
@media或 JS 注入的 class——它们必须能独立生效
CSSStyleSheet.replace() 在现代浏览器中仍不可靠
虽然 Chrome 85+ 支持 sheet.replace() 替换样式表内容，但它不触发重排重绘同步，且 Safari / Firefox 尚未实现。实测中常出现旧规则残留、伪类失效、CSS 变量未更新等问题。
性能影响：替换字符串比切换 disabled 多出解析、tokenize、构建 rule tree 等步骤，首屏后切换仍可能卡顿。
- 别把
replace()当作通用方案，它更适合运行时生成极小片段（如主题色变量注入） - 若真要用，必须配合
getComputedStyle()检查关键属性是否生效，不能只信回调 - 注意：
replace()不会保留原 sheet 的insertRule()动态规则，那些会丢失
如何让皮肤切换真正“零感知”
即使样式表切换不闪，字体、图片、阴影过渡仍可能暴露切换动作。关键不是“快”，而是“不可见”。
容易被忽略的点：
- 所有皮肤 CSS 必须声明相同的
font-familyfallback 链，避免字体回退导致 layout shift - 用
prefers-color-scheme做初始皮肤匹配，而非 JS 判断，避免 SSR/CSR 不一致 - 切换时加一层
transition: background-color .2s, color .2s（仅限颜色属性），但禁止对opacity或visibility做过渡——那是在掩盖问题 - 如果用了 CSS-in-JS（如 Emotion），确认其 cache key 包含皮肤标识，否则服务端渲染和客户端 hydrate 会 mismatch
最复杂的其实是皮肤间的设计语义对齐：比如 light 主题用 color: #333，dark 主题不能只写 color: #eee，得统一用 color: var(--text-primary) 并确保该变量在所有皮肤中都定义且可继承。漏掉一个变量，就可能在某个组件里闪一下黑底白字。
