按需加载CSS最常用方式是JavaScript动态创建并插入link标签，设置rel="stylesheet"和href后添加到head；需检查重复加载、监听onload/onerror，并结合点击、路由切换等业务场景触发。
按需加载 CSS 最常用的方式就是通过 JavaScript 动态创建并插入 <link> 标签，让浏览器在需要时才下载和应用对应样式表。
动态创建 link 标签并插入 head
核心思路是用 JS 创建一个 <link rel="stylesheet"> 元素，设置 href 指向目标 CSS 文件，再将其添加到 <head> 中。浏览器会自动发起请求并应用样式。
- 使用
document.createElement('link')创建元素 - 设置必要属性：
rel="stylesheet"、href="path/to/style.css" - 推荐加上
type="text/css"（虽非必需，但语义清晰） - 插入到
document.head，确保样式及时生效
示例代码：
function loadCSS(url) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
document.head.appendChild(link);
}
loadCSS('/css/modal.css');
避免重复加载同一份 CSS
多次调用可能插入多个相同 link，造成冗余请求或样式覆盖问题。可在插入前检查是否已存在对应 href 的 link。
立即学习“前端免费学习笔记（深入）”；
- 遍历
document.querySelectorAll('link[rel="stylesheet"]') - 比对每个
href是否与目标 URL 一致（注意处理相对路径、协议、查询参数等） - 已存在则跳过，否则插入
简化判断可直接用绝对 URL：
function loadCSS(url) {
const absoluteUrl = new URL(url, location.href).href;
const exists = [...document.querySelectorAll('link[rel="stylesheet"]')]
.some(link => new URL(link.href, location.href).href === absoluteUrl);
if (exists) return;
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
}
监听加载完成与错误处理
CSS 加载是异步的，但原生不支持 onload（部分浏览器支持，但兼容性差），更可靠的方式是轮询 document.styleSheets 或用 link.onload/link.onerror（现代浏览器支持良好）。
- 给 link 添加
onload回调，表示样式已解析并生效 - 添加
onerror处理 404、跨域等失败情况 - 注意：即使 onload 触发，也不代表所有选择器都已渲染生效，但 DOM 已可安全操作
function loadCSS(url, onSuccess, onError) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
link.onload = () => onSuccess && onSuccess();
link.onerror = () => onError && onError(new Error(`Failed to load CSS: ${url}`));
document.head.appendChild(link);
}
配合业务场景按需触发
真正“按需”的关键在于加载时机。常见结合点有：
- 用户点击按钮后加载弹窗样式（如
data-css="modal.css"） - 路由切换时（SPA 中进入某页面前预加载对应 CSS）
- 组件首次挂载时（React/Vue 中在
useEffect或mounted中调用） - 媒体查询匹配后加载响应式专用样式（如仅在 print 时加载打印样式）
例如点击触发：
document.querySelector('#open-modal-btn').addEventListener('click', () => {
loadCSS('/css/modal.css', () => {
document.querySelector('.modal').classList.remove('hidden');
});
});
