用Tailwind、Bootstrap等框架易FOUC是因@import导致串行加载延迟，应改用link预加载并严格排序，内联首屏关键样式（≤10KB），动态主题需服务端注入初始状态，并确保CSS返回text/css类型。
为什么用 Tailwind、Bootstrap 等框架时更容易 FOUC
不是框架本身有问题，而是它们的默认集成方式天然倾向触发 FOUC：Tailwind 的 @layer 和 @tailwind 指令依赖构建时处理，若你直接在 HTML 中用 @import 引入未构建的 CSS 文件，或 Bootstrap 用 @import "bootstrap/scss/bootstrap" 写在自定义样式里，浏览器就得串行解析——先下载主 CSS，再识别 @import，再发请求加载框架文件，首屏关键样式至少延迟一个 RTT（300–800ms）。更糟的是，预加载器根本看不到这些 @import，HTTP/2 多路复用也失效。
用 link rel="stylesheet" 替代所有 @import 链路
框架提供的 CSS 文件（如 tailwind.css、bootstrap.min.css）必须以 <link> 形式声明在 <head> 顶部，且顺序严格：
- reset / base 样式（如
normalize.css或tailwind-base.css）放最前 - 布局工具类（
tailwind-utilities.css或bootstrap-grid.css）紧随其后 - 组件样式（
bootstrap-components.css）放最后，避免被覆盖 - 每个
<link>必须带media="all"，否则浏览器可能跳过阻塞（比如写成media="(min-width: 768px)"在手机上就异步加载）
内联框架中的首屏关键规则，而非整包 CSS
把整个 tailwind.css（通常 > 3MB）或 bootstrap.min.css（~200KB）内联是灾难性的——它会阻塞 HTML 解析，反而拖慢首次绘制。真正该内联的是首屏实际用到的规则子集：
- 用 Chrome DevTools 的
Coveragetab 录制首屏加载，只提取绿色高亮部分（通常是.container、.btn-primary、.text-lg、.bg-gray-100这类） - 体积控制在 ≤ 10KB；超出后浏览器会暂停 HTML 解析去构建庞大的 CSSOM
- 必须写在
<style></style>里，且不能加media属性（否则失去阻塞能力） - 别手写——用
critters（Vite）、critical（CLI）或 Next.js 的experimental.optimizeCss自动生成，否则维护成本极高
动态主题或暗色模式下仍要防 FOUC
如果页面支持用户切换主题（如通过 data-theme="dark"），千万别在 DOMContentLoaded 后读取 localStorage 再动态插入 <link>——此时 HTML 已渲染完毕，必然闪一次。可靠做法是让决策前移：
立即学习“前端免费学习笔记（深入）”；
- 服务端根据请求头
Sec-CH-Prefers-Color-Scheme或 cookie 注入初始data-theme - 客户端用
<link rel="stylesheet" href="dark.css" media="print" onload="this.media='all'">预加载非关键主题 CSS - 确保初始 HTML 的
<html>上已有对应 class（如class="dark"），且内联 CSS 中已包含.dark .btn { background: #333; }这类规则
最容易被忽略的是：哪怕你内联了关键样式，只要外链 CSS 返回的 Content-Type 是 text/plain 而不是 text/css，浏览器就会拒绝解析，直接降级为异步加载——FOUC 照样发生。上线前务必用 DevTools 的 Network 面板检查每个 CSS 的 Initiator 是否为 parser，否则一切优化都白搭。
