intersectionobserver 仅触发检测，动态加载 css 需手动完成查重、创建 link、插入 head、监听加载四步；漏任一环将导致 fouc、白屏或样式错乱。
IntersectionObserver 不能直接加载 CSS，它只负责告诉你“某个元素进没进视口”。真正把样式加进去，得你手动创建 <link>、设 rel="stylesheet"、插到 document.head，还要防重复、等加载完成、兜底失败——漏掉任何一环，就可能出现 FOUC、白屏、样式错乱或静默失效。
为什么用 IntersectionObserver 触发 CSS 加载容易出问题
常见现象是：元素已滚动进视口，回调也执行了，但页面没变样，甚至闪一下才补上样式。原因不是 Observer 失效，而是你只做了“触发”，没做完“加载+注入+确认”整条链路。
典型错误包括：
- 在回调里只调
fetch(url)，但没把返回的 CSS 字符串插入<style></style>或创建<link> - 重复调用
document.head.appendChild(link)同一个 URL，导致多个同名样式表叠加，优先级混乱 - 依赖
link.onload切换状态，但在 Safari 或某些安卓 WebView 中该事件不触发，样式永远“未就绪” - 没给目标容器加占位样式（比如
opacity: 0.01），用户先看到无样式 HTML，再突然渲染，就是 FOUC
怎么安全地动态插入 link 标签
核心动作就四步：查重 → 创建 → 插入 → 监听。每一步都有明确要检查的点。
- 用
new Set()全局记录已加载的 URL，每次插入前先if (loadedCSS.has(url)) return -
link.rel = "stylesheet"必须显式设置，不能靠默认值；link.href = url赋值后才插入 DOM - 插入必须用
document.head.appendChild(link)，不要插到body或某个 div 里——否则可能被浏览器忽略或阻塞时机错乱 - 监听加载完成推荐写法：
link.addEventListener("load", handler, { once: true })+setTimeout(() => { /* 超时降级 */ }, 5000)，避免卡死
如何防止 FOUC 和布局跳动
FOUC 不是因为 CSS 下载慢，而是因为样式注入晚于 HTML 渲染。哪怕文件只有 1KB，只要它在 DOM 构建完之后才插入，就可能被肉眼捕获。
- 给目标区域加一个轻量级占位类，比如
class="section-products lazy-loading"，CSS 里写.lazy-loading { opacity: 0.01; transition: opacity 0.1s; } - 在
link.addEventListener("load", ...)回调里移除该类，或添加.loaded类来恢复可见性 - 如果 CSS 里含
@font-face或远程图片，仅监听link.load不够，需额外用document.fonts.load("16px 'MyFont'")确认字体就绪 - 避免在
IntersectionObserver回调里立即操作 DOM 样式，优先走 class 切换，减少强制同步布局
跨域 CSS 和缓存要注意什么
如果你的 CSS 文件托管在 CDN 或不同域名下，浏览器会按 CORS 策略限制字体、图片等资源加载，即使 link 插入成功，样式也可能部分失效。
- 跨域 CSS 必须加
link.crossOrigin = "anonymous"，否则字体请求会被拒绝，控制台报Cross-Origin Read Blocking (CORB) - CDN 返回的
Cache-Control要合理：非关键 CSS 可设max-age=31536000，但开发阶段建议加时间戳参数（如?v=20260527）避免本地调试缓存陷阱 - 不要对同一 URL 同时写
<link rel="preload">和普通<link rel="stylesheet">，Chrome 可能发起两次请求 - Vite/Webpack 用户注意：
import('./module.css')默认走 JS 动态导入，生成的是link+onload组合，但若模块内含@import，仍会串行加载，应尽量扁平化 CSS 拆包
最难的从来不是“怎么插入 link”，而是判断“这个 CSS 真的可以延迟吗”——比如页脚的阴影样式可以拖到最后，但导航栏的 display: flex 缺失会导致整个首屏布局坍缩。延迟的边界，得靠真实设备实测，而不是看代码里写了多少个 observer.observe()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
