直接改link.href会闪屏，因浏览器同步卸载旧样式后异步加载新CSS，产生无样式空白期；应预置所有皮肤CSS并用disabled控制启用状态，避免网络请求与解析延迟。
直接改 link.href 会触发浏览器先卸载旧样式表、再异步加载新 CSS，中间存在无样式空窗期——这不是 JS 慢，是浏览器样式加载机制本身决定的。
为什么改 href 会闪屏而不是平滑过渡
浏览器对 <link rel="stylesheet"> 的 href 修改有明确行为：立刻停用旧样式（DOM 已渲染但无有效规则），然后发起新请求。这之间没有缓冲，尤其在慢网、大文件或首次加载时，空白期肉眼可见。
- 旧样式卸载是同步的，新样式加载是异步的，二者不重叠
-
load事件只表示 CSS 文件下载完成，不代表渲染就绪；DOM 可能已重排多次，但样式还没应用上 - 如果新 CSS 返回 404 或 CORS 失败，控制台可能静默，但页面已回退到 UA 默认样式（比如黑字白底突然变蓝字白底）
常见错误写法加剧闪动
这些操作看似“干净”，实则放大空窗风险：
- 用
document.getElementById("theme-css").remove()再appendChild新<link>：触发 DOM 重排，且新节点总在末尾插入，可能覆盖关键基础样式 - 靠
document.styleSheets[n]索引操作：索引不稳定（预加载、preload、动态插入都会改变顺序），容易误关/误开非目标样式表 - 只改
href但没加防缓存参数：开发时改了 CSS 却看不到效果，误以为切换失败，反复点击导致多个请求被net::ERR_ABORTED
真正稳的切换方式：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 -
disabled是纯样式层开关，不触发网络请求、不修改 DOM 树、无重排开销，IE9+ 全支持 - 注意：只有
rel="stylesheet"的<link>支持disabled，rel="preload"或rel="icon"不行
路径与缓存问题常被忽略
即使用了 disabled 方案，路径错或缓存旧版本仍会导致“换肤成功但样式不对”：
- 路径必须用根相对路径（如
/css/themes/dark.css）或绝对 URL，避免因 HTML 当前 URL 变化导致 404 - 本地开发时双击打开 HTML 文件，
file://协议下跨域限制会让 CSS 加载失败，务必用本地服务器（如npx serve） - 上线后若发现换肤后颜色没变，先看 Network 面板里对应 CSS 的状态码——404 是路径错，200 但内容旧，说明缓存没破，可在 href 后加
?v=1.2.3版本号
最易被忽略的一点：所有皮肤 CSS 必须使用完全一致的选择器结构和变量命名，否则 disabled 切换后，某些元素可能因为规则缺失而回退到浏览器默认样式，造成局部“失色”，而非整页闪白。
