动态创建link标签切换主题不推荐，因其引发两次重排、FOUC明显、缓存不可控，且Safari中onload不可靠；旧link即使remove()，样式规则仍可能残留于document.styleSheets中干扰计算。
直接动态创建 <link> 标签来切换主题，是最容易出问题的做法——它会触发两次重排、FOUC 明显、缓存不可控，且 Safari 和部分 WebView 中 onload 事件不可靠。
为什么 new link() + appendChild() 不推荐
浏览器对新插入的 <link rel="stylesheet"> 有延迟应用行为：旧样式未退出渲染流，新样式又没就绪，中间必然闪白（FOUC）。更麻烦的是，旧 <link> 节点即使被 remove()，其样式规则仍可能残留在 document.styleSheets 中，干扰后续计算。
- 每次
appendChild()都触发一次 DOM 重排 + CSS 解析，性能差 - 删除旧 link 后，浏览器不一定立即释放内存引用，
:root变量可能残留 -
onload在 Safari 中常滞后或不触发，导致“已切但没生效”的假象 - 跨域 CSS（如 CDN 主题）用此方式加载，
document.styleSheets无法访问，调试困难
如果非要用动态创建，必须满足这三点
仅当主题 CSS 文件无法预置（比如用户上传、后端动态生成），才考虑运行时创建 <link>。此时必须：
- 先用
fetch(themeUrl, { method: 'HEAD' })预检资源可用性，避免 404 导致空白页 - 创建后立即将
link.disabled = true，等load触发再设为false，防止竞态 - 旧
<link>不直接remove()，而是先设disabled = true，再remove()，确保样式退出渲染流程
示例关键逻辑：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
const oldLink = document.getElementById('theme-dynamic');
if (oldLink) {
oldLink.disabled = true;
setTimeout(() => oldLink.remove(), 16); // 等一帧再删
}
const newLink = document.createElement('link');
newLink.id = 'theme-dynamic';
newLink.rel = 'stylesheet';
newLink.href = '/css/custom-theme.css';
newLink.disabled = true;
document.head.appendChild(newLink);
newLink.addEventListener('load', () => {
newLink.disabled = false;
localStorage.setItem('theme-url', newLink.href);
});
newLink.addEventListener('error', () => {
console.error('动态主题加载失败');
});
更稳妥的替代方案：preload + href 切换
真正要兼顾兼容性与体验，别创建新节点，改已有节点的 href，并配合 <link rel="preload"> 提前拉取资源：
- HTML 中只保留一个带
id="theme-css"的<link> - 所有备用主题用
<link rel="preload" as="style" href="dark.css">提前下载，但不启用 - 切换时只改
document.getElementById('theme-css').href，浏览器自动 abort 旧请求、发起新请求 - 监听
load时，用requestAnimationFrame再检查一次getComputedStyle(document.documentElement).getPropertyValue('--bg-color')，避免 Safari 滞后
最易被忽略的点：href 赋值后，document.styleSheets 里对应项的 cssRules 可能为空——这不是失败，是浏览器还没解析完；得靠实际变量值或视觉反馈确认是否真生效。
