直接切换link.href必然闪屏，因浏览器会卸载旧cssom并重建新样式树产生空白期；真零延迟方案是预加载全部皮肤css并用disabled控制启用状态。
直接切换 <link> 的 href 属性必然闪屏，这不是网络慢或 JS 执行慢，而是浏览器样式表机制本身存在卸载旧 CSSOM 与重建新样式树之间的空白期。真正零延迟的方案是预加载全部皮肤 CSS 并用 disabled 控制启用状态。
为什么 link.href = "dark.css" 一定闪屏
浏览器对 <link rel="stylesheet"> 的处理是原子性的：改 href 就等于告诉它“旧样式已失效”，立刻卸载当前 CSSOM；然后发起新请求、下载、解析、构建新 CSSOM——这中间 DOM 已渲染，但无有效样式可用。
- 常见错误现象：
Failed to load resource: net::ERR_ABORTED（前一个请求被 cancel）、文字短暂无色/无间距、布局突然塌陷 - 哪怕新 CSS 已缓存，卸载旧样式 + 重建新样式树仍需时间，空白期不可消除
-
DOMContentLoaded后再切主题？晚了。首屏渲染早已完成，此时补样式就是重绘，必然跳
用 disabled 切换才是真零延迟
所有皮肤 CSS 都保留在 DOM 中，只通过 disabled 控制启用状态，完全绕过网络与解析环节。
- HTML 中一次性引入：
<link id="theme-light" rel="stylesheet" href="light.css">、<link id="theme-dark" rel="stylesheet" href="dark.css" disabled> - 切换时只操作属性：
document.getElementById("theme-light").disabled = true、document.getElementById("theme-dark").disabled = false - 各皮肤 CSS 必须能独立生效——不能依赖
body.dark这类 JS 注入的 class，否则disabled切过去就失效 - 单个皮肤 CSS 建议 ≤150KB（gzip 前），太大可能影响初始 HTML 体积和解析速度
transition 写在哪儿才起作用
transition 必须写在基础选择器中，比如 body 或 :root 的初始规则里。若只放在 .dark-theme 类中，初始无过渡声明，切换 class 时会瞬间跳变。
- 别写
transition: --bg-color 0.3s—— 浏览器直接忽略，连警告都不报 - CSS 变量只负责存值，动画必须由具体属性触发：
background-color: var(--bg-color)+transition: background-color 0.3s - 所有用到变量的元素，只要涉及颜色/透明度/尺寸变化，都要显式加
transition - 避免在
::before或::after伪元素里用变量 +transition，部分浏览器渲染延迟明显
真正“零感知”要防的不是样式切换本身
即使 disabled 切换完美，字体回退、图片未预加载、阴影过渡未声明、合成层反复重建，都会暴露切换动作。
- 深色模式变量必须提前写进内联
<style></style>，不能等 JS 执行后才注入 - 背景图 URL 切换前必须用
new Image().src = 'url.jpg'预加载，路径要和 CSS 中完全一致（含 CDN 域名、hash） - 滚动区域加
transform: translateZ(0)+backface-visibility: hidden防 iOS Safari 合成层抖动，但别滥用 - 第三方组件主题失效？检查是否覆盖了它的选择器优先级，绝对不要对它们加
!important—— 会切断变量链
最容易被忽略的是：首帧闪屏往往不是因为切换逻辑写错了，而是 标签上没在 HTML 解析早期就带 data-theme，导致浏览器第一遍样式计算全按默认值走。这个时机错过，后面所有优化都打折扣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
