延迟加载CSS可通过JavaScript动态控制样式表加载时机。1. 动态创建link元素，页面加载完成后引入非关键CSS；2. 结合用户行为或定时器延迟加载，如滚动或3秒后加载；3. 使用rel="preload"预加载资源，再切换为stylesheet以优化优先级。需确保仅延迟非关键CSS，避免布局偏移，并注意浏览器兼容性。核心是通过JS按需插入link标签实现。
在网页性能优化中，延迟加载CSS是一种有效减少首屏加载时间的方法。虽然CSS通常是通过link标签直接引入的，但你可以使用JavaScript来动态控制样式表的加载时机，从而实现延迟加载。
1. 动态创建link元素
最常用的方式是通过JavaScript创建一个<link>标签，并将其添加到页面的<head>中。这样可以推迟样式表的实际请求时间。
示例代码：
function loadCSS(href) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}
// 页面加载完成后延迟加载非关键CSS
window.addEventListener('load', () => {
loadCSS('/styles/non-critical.css');
});
2. 设置加载条件或时间延迟
你也可以结合用户行为（如滚动、点击）或定时器来触发CSS加载，避免一开始就下载所有样式。
立即学习“Java免费学习笔记（深入）”；
例如，延迟3秒加载某个样式：
setTimeout(() => {
loadCSS('/styles/lazy-theme.css');
}, 3000);
或者等用户滚动页面后再加载：
window.addEventListener('scroll', function onScroll() {
loadCSS('/styles/extra-layout.css');
window.removeEventListener('scroll', onScroll); // 只加载一次
});
3. 预加载提示（可选优化）
如果你希望浏览器提前发现资源但不立即应用样式，可以先用rel="preload"预加载，之后再切换为stylesheet。
function preloadAndLoadCSS(href) {
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = href;
link.onload = () => {
const style = document.createElement('link');
style.rel = 'stylesheet';
style.href = href;
document.head.appendChild(style);
};
document.head.appendChild(link);
}
这种方式能提升加载优先级感知，同时控制实际渲染时机。
注意点：- 确保延迟加载的是非关键CSS（如主题、动画、非首屏组件），否则会影响用户体验。
- 动态加载的样式可能引起页面重绘或布局偏移，建议提前预留结构或使用占位样式。
- 考虑低版本浏览器兼容性，避免在不支持动态插入link的环境中出错。
