css懒加载本质是按需触发link插入而非语法支持，推荐用intersectionobserver监听视口后动态创建rel="stylesheet" link并控制media切换，避免fouc；preload仅下载不生效，不可替代stylesheet。
如何让CSS文件真正懒加载（而不是只是延迟执行）
纯CSS文件本身不支持“懒加载”——link标签一旦插入DOM，浏览器就会立即发起请求并阻塞渲染（除非是media匹配失败的场景）。所谓“CSS懒加载”，本质是**按需触发资源请求 + 控制应用时机**，常见于组件级样式、折叠区域、模态框等场景。核心思路不是改CSS语法，而是用JS控制link的插入时机和条件。
用IntersectionObserver监听元素进入视口后加载CSS
这是目前最可控、兼容性足够（Chrome 58+/Firefox 55+/Safari 12.1+）、且不阻塞首屏的方式。关键不是“加载CSS”，而是“在需要时才让浏览器去取那个CSS”。
-
IntersectionObserver监听目标容器（如section.featured），当它进入视口时，动态创建link并插入head - 必须设置
rel="stylesheet"和href，否则不会触发网络请求 - 避免重复插入：检查
document.querySelector('link[href="xxx.css"]')是否存在 - 如果CSS含
@import或字体等子资源，它们会按需加载，但首次渲染仍可能有FOUC（闪动），可配合media="print"+ JS切换来缓解
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/featured-section.css';
link.media = 'print'; // 先不生效
document.head.appendChild(link);
// 加载完成后再启用
link.onload = () => link.media = 'all';
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
observer.observe(document.querySelector('.featured-section'));
为什么不能用rel="preload"代替rel="stylesheet"
rel="preload"只是提前拉取资源，但不会自动应用样式规则；它不解析CSSOM，也不影响渲染树。如果你只preload，样式永远不会生效——你得自己用JS注入style或再创建一个link[rel=stylesheet]。
-
<link rel="preload" href="lazy.css" as="style">→ 只下载，不解析、不应用 -
<link rel="stylesheet" href="lazy.css">→ 下载 + 解析 + 阻塞渲染（除非media不匹配） - 组合使用可行：preload + 后续insert
link[rel=stylesheet]，但增加复杂度，且preload无缓存校验优势 - 移动端Safari对
preload的as="style"支持不稳定，部分版本忽略
容易被忽略的细节：CSS加载完成 ≠ 样式已就绪
即使link.onload触发，也不能保证样式已参与渲染计算——特别是当CSS含@font-face、url()图片或跨域@import时，这些子资源仍会异步加载，导致布局偏移或回流。
- 不要依赖
onload后立刻调用getComputedStyle，可能拿到旧值 - 若需精确控制样式生效时机（比如动画启动），建议加一层
requestAnimationFrame延后读取 - 服务端开启HTTP/2或HTTP/3能显著降低多个小CSS文件的连接开销，比前端“懒加载”更治本
- Webpack/Vite等构建工具的
import('./module.css')本质也是动态link插入，但封装了Promise和错误处理，生产环境优先用它而非手写Observer
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
