首屏白屏主因是HTML结构与CSS加载节奏错位导致关键渲染路径阻塞：浏览器需等待CSSOM构建完成才渲染，即使DOM已解析到<body>。内联关键CSS必须置于<head>中<meta charset>之后首位，禁用@import，仅含首屏真实渲染所需样式，体积控制在10KB内；非首屏CSS应通过media属性或preload+onload异步加载，避免默认阻塞。
为什么首屏内容卡在白屏，不是CSS慢而是结构没对齐
白屏时间长，往往不是CSS文件太大，而是HTML结构和CSS加载节奏错开了。浏览器能一边解析HTML一边下载CSS，但只要关键CSSOM没建完，哪怕DOM树已经建到<body>里第一行文字，它也不会渲染——因为没样式就无法生成渲染树。真正卡点是「DOM节点等CSSOM」，而不是「HTML没解析完」。
常见错误现象包括：LCP指标差、移动端3G下首屏超3秒、禁用网络后页面完全空白（连标题都不见）。这些说明内联的关键CSS压根没生效，或者被后面的<link rel="stylesheet">拖垮了。
-
<style>标签没放在<head>最顶部，后面紧跟着一个未加media的<link>，浏览器立刻暂停渲染去加载它 - 内联
<style>里写了@import url("theme.css")，触发同步请求，退化为阻塞源 - 关键CSS提取时没过滤
display: none元素或未匹配的@media (min-width: 1200px)规则，体积虚高 - HTML中
<script>写在<head>且没加defer，中断DOM解析，间接拉长CSSOM等待窗口
怎么提取真正“首屏必需”的CSS规则
别抄main.css前2KB，也别信构建工具默认输出。关键CSS必须基于真实视口尺寸（比如iPhone SE的375×667）动态捕获首屏DOM实际用到的选择器。
手动验证最直接：打开DevTools → Network → Disable cache → 禁用所有网络请求 → 刷新页面。还能显示的标题、主图容器、按钮，对应的选择器才是真关键。
立即学习“前端免费学习笔记（深入）”；
- 用
critters（Vite/webpack插件）或criticalCLI驱动Puppeteer，在模拟设备下跑一遍，自动提取并剔除@font-face、@keyframes、url()声明 - 过滤掉CSS-in-JS生成的动态类名（如
jsx-abc123），这类规则运行时才注入，内联无效 - 确保提取结果gzip后≤10KB；超过这个值，HTTP/2多路复用优势开始盖过内联收益
- 提取后检查是否含
background-image: url(...)或font-family引用，这些应改用<link rel="preload" as="image">或交由非关键CSS管理
非关键CSS怎么加载才不拖慢首屏
把非首屏CSS（比如模态框、分页、暗色模式、打印样式）当成普通资源处理，别让它进关键路径。浏览器默认把没media的<link rel="stylesheet">当作media="all"，即刻阻塞渲染。
正确做法是切断默认行为，让加载时机可控：
- 设备特定样式直接加
media属性：<link href="print.css" rel="stylesheet" media="print">，浏览器根本不会下载它，除非用户点打印 - 响应式样式按断点隔离：
<link href="mobile.css" rel="stylesheet" media="(max-width: 768px)">，只在匹配时阻塞 - 通用非关键CSS用
<link rel="preload" as="style" onload="this.rel='stylesheet'">异步加载，注意配<noscript>回退 - 绝对避免在CSS文件里写
@import——它强制串行加载，比多个<link>还慢，且多数构建工具不处理它
HTML结构本身怎么减少重排压力
布局阶段（Layout）不是被CSS卡住，而是被DOM结构+样式组合反复触发。一个div设了width: 50%又依赖父容器offsetWidth，每次读写都可能强制同步重排。
结构设计要提前规避这类陷阱，尤其对高频操作区域：
- 动画元素优先用
transform和opacity，它们走合成层，不触发Layout；避免用top/left/width做位移或缩放 - 频繁切换显示/隐藏的模块（如Tab面板），用
hidden属性或aria-hidden+CSS控制，而非反复增删class触发型样式重算 - 循环插入元素时，避免每个都带
display: table或float——这类样式会强制同步Layout，改用display: block或Flex/Grid布局 -
visibility: hidden比display: none更轻量，前者保留文档流位置，后者会触发DOM重排
最难的部分不是写对代码，而是判断哪些CSS规则真正在首屏起作用——它取决于设备DPR、字体加载策略、甚至用户滚动速度。静态分析工具只能覆盖一部分，Performance面板里Layout和Recalculate Style的时间戳交叉验证，才是最终依据。
