通过JavaScript动态创建link标签可实现CSS异步加载，避免阻塞渲染。1. 创建link元素并设置rel和href属性，插入head中实现非阻塞加载；2. 可监听onload和onerror事件处理加载完成或失败；3. 通过查询已存在link防止重复加载；4. 可设置media属性控制应用条件，支持延迟激活样式。该方法灵活高效，是前端性能优化常用策略。
在Web开发中，为了提升页面加载性能，经常需要异步加载CSS资源。直接在HTML中使用 link[rel="stylesheet"] 会阻塞渲染，而通过JavaScript动态创建 <link> 标签可以实现非阻塞的异步加载。以下是具体实现方法。
动态创建 link 标签实现异步加载
通过 JavaScript 创建一个 <link> 元素，并设置其 rel 属性为 "stylesheet"，href 指向目标CSS文件路径，再将其插入到 <head> 中。这种方式不会阻塞页面初始渲染，因为浏览器不会提前预加载该资源。
示例代码：
const loadCSS = (url) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
};
// 调用函数加载样式表
loadCSS('/path/to/styles.css');
添加 onload 回调处理加载完成
某些场景下，你可能需要在样式表加载完成后执行一些操作（比如显示内容、触发动画）。可以通过监听 load 事件来实现。
立即学习“Java免费学习笔记（深入）”；
改进版示例：
const loadCSSWithCallback = (url, callback) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
if (callback) {
link.onload = () => {
callback(null, link);
};
link.onerror = () => {
callback(new Error(`Failed to load CSS: ${url}`));
};
}
document.head.appendChild(link);
};
// 使用示例
loadCSSWithCallback('/path/to/theme.css', (err, link) => {
if (err) {
console.error(err);
} else {
console.log('样式表已成功加载:', link.href);
}
});
避免重复加载相同样式表
如果多次调用加载函数，可能会导致同一CSS被重复插入。可以在插入前检查是否已存在相同 href 的 link 标签。
优化逻辑：
const loadCSSOnce = (url, callback) => {
// 检查是否已加载
const existingLink = document.querySelector(`link[href="${url}"]`);
if (existingLink) {
if (callback) callback(null, existingLink);
return;
}
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
link.onload = () => callback && callback(null, link);
link.onerror = () => callback && callback(new Error(`Load failed: ${url}`));
document.head.appendChild(link);
};
可选：设置媒体类型或延迟加载
你还可以通过设置 media 属性控制样式表的应用条件（如 print、screen 等），实现更精细的控制。例如只在特定条件下激活样式：
link.media = 'print'; // 只用于打印时加载 // 或者先设为无效值，稍后切换 link.media = 'not all'; // 初始不生效 // 加载后再改为： link.media = 'all';
这种“先加载但不应用”的技巧可用于关键CSS优先策略中。
基本上就这些。通过 JavaScript 动态插入 <link> 标签，既能实现异步加载，又能灵活控制加载时机和行为，是现代前端优化中的常用手段。
