直接改 link.href 必然闪屏，因浏览器卸载旧cssom与加载新cssom存在不可消除的空白期；应使用 disabled 属性切换预加载的多主题样式表实现零延迟。
直接改 link.href 必然闪，这不是网络慢或 JS 执行慢，而是浏览器样式表机制本身存在卸载-加载空白期。
为什么 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 解析和初始渲染
CSSStyleSheet.replace() 看似高级，实则坑多
Chrome 85+ 虽支持，但它不触发同步重绘，Safari / Firefox 未实现，实测伪类丢失、变量不更新、动态插入规则清空等问题频发。
- 性能上比切
disabled多出 tokenize、rule tree 重建等开销，大文件下明显卡顿 - 若真要用，必须配合
getComputedStyle(el).color主动校验关键属性是否生效，不能只信replace()回调 - 它无法保留原 sheet 中 JS 动态添加的规则（如
sheet.insertRule()），这部分逻辑会丢
真正“零感知”要防的不是样式切换本身
即使 disabled 切换完美，字体回退、图片未预加载、阴影过渡未声明、合成层反复重建，都会暴露切换动作。
- 深色模式变量必须提前写进内联
<style></style>，不能等 JS 执行后才注入 - 背景图 URL 切换前必须用
<link rel="preload">预加载，路径要和 CSS 中完全一致（含 CDN 域名、hash） - 滚动区域加
transform: translateZ(0)防 iOS Safari 合成层抖动，但别滥用——每个动画元素单独加，别套在父容器上
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
