Promise 可优雅异步加载 CSS 并确保样式真正就绪：先包装 link 的 load/error 事件，再通过强制 reflow（如 offsetHeight）或 getComputedStyle 确认渲染生效，最后封装为可复用、支持错误处理的 loadTheme 函数。
Promise 可以用来优雅地异步加载 CSS 文件，并确保样式表加载完成、渲染就绪后再执行后续逻辑（比如应用主题类、触发重排或通知 UI 更新）。关键在于：CSS 加载本身不提供原生 Promise 接口，需手动包装；而“就绪”不仅指 <link> 标签加载完成，还需等待浏览器实际解析并应用样式（尤其涉及 @import 或字体等依赖时）。
用 Promise 包装 link 标签的加载过程
创建 <link rel="stylesheet"> 并监听其 load 和 error 事件，返回 Promise：
说明：仅靠 load 事件不能 100% 保证样式已生效（例如 Safari 中可能提前触发），但对绝大多数静态 CSS 主题切换场景已足够可靠。若需更高精度，需结合后续检测手段。
建议：
立即学习“Java免费学习笔记（深入）”；
- 每次切换前先移除旧主题 link（避免样式冲突）
- 设置
crossOrigin属性（如需加载跨域 CSS） - 给 link 添加唯一 id 或 data 属性，便于管理
确保样式“真正就绪”：加一层微任务或 reflow 检测
load 触发后，浏览器可能尚未将新规则注入 CSSOM 或完成布局计算。可利用 getComputedStyle 或强制 layout 触发来确认：
说明：读取一个受目标样式影响的元素的计算样式（如 color、background-color），会触发浏览器同步计算，从而确保新样式已参与渲染流程。
建议：
立即学习“Java免费学习笔记（深入）”；
- 选一个在主题切换中必变的 CSS 属性（如
body的--theme-primary自定义属性） - 用
getComputedStyle(document.body).getPropertyValue('--theme-primary')读取一次 - 或简单调用
document.body.offsetHeight强制回流（轻量且兼容性好）
封装成可复用的 loadTheme 函数
把加载 + 就绪确认合并为一个返回 Promise 的函数，支持链式调用和错误处理：
示例代码结构：
function loadTheme(cssUrl) {
return new Promise((resolve, reject) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = cssUrl;
link.onload = () => {
// 确保样式已参与渲染
void document.body.offsetHeight; // 强制 reflow
resolve();
};
link.onerror = () => reject(new Error(`Failed to load theme: ${cssUrl}`));
document.head.appendChild(link);
});
}
// 使用
loadTheme('/themes/dark.css')
.then(() => {
document.body.className = 'theme-dark';
console.log('Dark theme ready');
})
.catch(err => console.error(err));
进阶：支持预加载与缓存控制
频繁切换主题时，可配合 <link rel="preload"> 提前拉取资源，或用 cache: 'reload' 避免 Service Worker 缓存旧版本：
建议：
立即学习“Java免费学习笔记（深入）”；
- 首次加载主题时用
fetch(cssUrl, { cache: 'no-cache' })验证内容有效性（可选） - 动态插入 link 前检查
document.querySelector(`link[data-theme="${name}"]`)是否已存在 - 对深色/浅色等固定主题，可预加载两个 CSS 文件，切换时仅切换
disabled属性
