必须内联首屏关键CSS，否则所有优化都压不住FOUC；Bootstrap首屏闪烁主因是加载方式导致RTT延迟与样式滞后；需用Coverage+critical提取≤10KB纯首屏规则并内联顶部；动态主题切换须服务端写死data-bs-theme且客户端立即调用.update()。
必须内联首屏关键CSS，否则所有优化都是补救措施——不满足这个前提，preload、critters、onload切换都压不住FOUC。
为什么Bootstrap在首屏总闪一下
不是Bootstrap写得差，是它默认加载方式天然触发FOUC：用@import引入、或把bootstrap.min.css放在靠后位置、或依赖JS动态注入，都会让浏览器至少多等一个RTT（300–800ms）才拿到样式规则。此时DOM已开始渲染，默认样式先画一遍，再重绘——人眼能明确感知“白→色块→跳变”。
- Chrome DevTools 的 Coverage 面板显示：实际首屏只用到约5%的
bootstrap.min.css规则（比如.container、.btn-primary、.text-lg、.row），其余全是冗余 - 手动复制整包CSS内联？体积超200KB，直接阻塞HTML解析，首次绘制反而更慢
- 用
link rel="stylesheet"但没加media="all"？浏览器可能跳过阻塞（例如写成media="(min-width: 768px)"，手机端就异步加载）
怎么提取并内联真正该上头的关键CSS
别猜，用工具+人工校验。Coverage面板导出的是原始集合，需剔除非首屏规则。
- 用
criticalCLI生成基础内联块：critical https://yoursite.com --base ./dist --width 375 --height 667 --inline - 人工检查并删掉这些内容：
@media (min-width: 768px)整段（除非你确认该断点内容在首屏可见）、:hover/:focus伪类、懒加载模块的@font-face、JS动态添加的类（如.is-open） - 最终
<style></style>块必须：放在最顶部、无media属性、gzip前≤10KB（超出就反向拖慢HTML解析） - Next.js用户：在
app/layout.tsx里import bootstrapCss from 'bootstrap/dist/css/bootstrap.min.css?raw'，然后<style>{bootstrapCss}</style>——但仅限bootstrap.min.css，图标字体仍走外链
动态主题切换时为什么又闪一次
因为只改data-bs-theme属性，没触发Bootstrap的CSS变量重算。浏览器按旧值渲染完首帧，JS执行完才刷新——“先亮后暗”或“先暗后亮”必然发生。
立即学习“前端免费学习笔记（深入）”；
- 服务端/HTML源码中必须写死：
（根据用户上次偏好或prefers-color-scheme快照决定） - 客户端JS不能只设属性：
document.documentElement.setAttribute('data-bs-theme', 'dark')之后，必须立即调用bootstrap.Theme.getOrCreateInstance().update() - 如果用
next-themes，确保tailwind.config.ts中darkMode: 'selector'，且useTheme().theme变更时同步设置data-bs-theme和调用.update() - 漏掉
color-scheme: light dark声明？原生控件（<input>、<select></select>）仍按系统主题渲染，视觉割裂感更强
真正麻烦的从来不是某一行代码，而是三件事必须同时对齐：内联CSS的精确范围、data-bs-theme的初始值来源、以及.update()调用的时机。少盯住一个，闪就还在那儿。
