JavaScript 可动态检测运行时条件（如屏幕宽度、暗色模式等）并插入 link 标签按需加载 CSS；需去重、监听 load 事件、支持 preload 优化，且注意异步延迟与 SSR 兼容性。
可以通过 JavaScript 检测运行时条件（比如设备类型、屏幕宽度、用户偏好、URL 参数等），然后动态创建 标签插入到 中，实现按需加载 CSS 文件。
判断条件并加载对应 CSS
核心思路是：用 JS 获取条件 → 构造 link 元素 → 设置 href 和属性 → 插入 head。
- 检测屏幕宽度加载响应式主题：
if (window.innerWidth < 768) { loadCSS('mobile.css'); } else { loadCSS('desktop.css'); } - 检测 prefers-color-scheme 暗色模式：
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { loadCSS('dark-theme.css'); } else { loadCSS('light-theme.css'); } - 简单封装加载函数：
function loadCSS(href) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; document.head.appendChild(link); }
避免重复加载和确保加载完成
多次调用可能重复插入相同样式表，建议加去重逻辑；如需依赖样式就绪后再执行后续操作，可监听 load 事件。
- 检查是否已存在同名 CSS：
function loadCSS(href) { if (document.querySelector(`link[href="${href}"]`)) return; const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; document.head.appendChild(link); } - 加载完成后回调（适用于依赖样式的 JS 逻辑）：
link.onload = () => console.log('CSS loaded'); link.onerror = () => console.error('CSS load failed');
支持异步与预加载优化
现代浏览器支持 rel="preload" 提前获取资源，再切换为 stylesheet，提升性能。
立即学习“前端免费学习笔记（深入）”；
- 先预加载，再激活：
const link = document.createElement('link'); link.rel = 'preload'; link.as = 'style'; link.href = 'theme.css'; link.onload = () => { link.rel = 'stylesheet'; }; document.head.appendChild(link); - 配合
media属性做条件加载（无需 JS）：
注意： 这种方式由浏览器原生处理，不触发 JS，但条件有限（仅支持媒体查询）。
兼容性与注意事项
动态加载 CSS 在所有现代浏览器中均支持，IE9+ 也可用。需注意以下几点：
- CSS 加载是异步的，样式生效有延迟，避免在插入后立即读取元素 computedStyle
- 动态插入的 CSS 会参与层叠，顺序取决于插入时机，必要时可控制
的位置 - 服务端渲染（SSR）场景下，JS 尚未执行，首屏仍需内联关键样式或预置基础 CSS
- 如需热切换主题，记得移除旧样式表：
document.querySelector('link[title="theme"]').remove()
