移动端首屏白屏？检查 CSSOM 构建阻塞了页面显示
浏览器必须等待所有 CSS 解析完成才能构建渲染树，这会导致移动端首屏长时间白屏。
CSSOM 构建阻塞导致首屏白屏的原因
浏览器将 HTML 转换为 DOM 树，同时将 CSS 解析为 CSSOM 树。CSSOM 是渲染阻塞的，浏览器必须等待所有 CSS 下载并解析完毕，才能开始构建渲染树。在移动端网络环境下，如果 CSS 文件体积大或加载慢，DOM 树虽然构建完成，但页面内容无法渲染，导致用户看到白屏。
CSS 规则具有层叠特性，后续的解析可能会覆盖前面的规则，因此浏览器不能在 CSSOM 不完整时渲染页面。这意味着即使 HTML 内容已经解析完毕，只要 CSSOM 未完成，屏幕上就不会出现任何像素。移动设备屏幕小，用户对白屏的容忍度低，这种阻塞会严重影响用户体验。
排查 CSSOM 阻塞的具体步骤
使用 Chrome 开发者工具的 Network 面板，勾选“Disable cache”并刷新页面。在 Network 面板中，找到 CSS 文件请求，查看其加载状态。如果 CSS 文件显示为“pending”或“stalled”，说明下载被阻塞。同时，在 Performance 面板中录制页面加载过程，查看“Main”线程的时间线，寻找长时间处于“Parse CSS”状态的事件。
在 Performance 面板中，找到“Recalculate Style”和“Layout”事件。如果“Recalculate Style”事件紧随在“Parse CSS”之后且耗时较长，说明 CSSOM 构建确实阻塞了后续的渲染树构建。这表明浏览器在等待 CSS 解析完成，从而推迟了页面的首次渲染。
判断 CSSOM 阻塞是否影响首屏显示
通过 Performance 面板中的“First Contentful Paint”（FCP）指标来验证。FCP 是浏览器将第一个像素绘制到屏幕上的时间。如果 FCP 时间与 CSS 文件的下载和解析时间高度重合，且在 CSS 文件加载完成前 FCP 为空，则证实 CSSOM 构建阻塞了首屏显示。
检查页面源代码中 CSS 的引入方式。如果 CSS 是通过阻塞式脚本或内联样式引入，且未使用 media 属性延迟加载，那么 CSSOM 构建必然阻塞渲染。如果 CSS 文件较大，且在移动网络下加载缓慢，这种阻塞效应会被放大，导致首屏白屏时间显著增加。
优化 CSSOM 构建阻塞的执行操作
将非首屏关键 CSS 延迟加载，或使用 media 属性（如 media='print'）将其标记为非阻塞资源。这样可以确保浏览器在解析 HTML 时不会等待这些 CSS，从而提前构建 DOM 树。对于移动端，应优先加载首屏所需的 CSS，并压缩 CSS 文件体积，减少解析时间。
减少 CSS 选择器的复杂度。虽然 MDN 指出选择器性能优化仅在微秒级别，但复杂的嵌套选择器会增加浏览器遍历 DOM 树的工作量，从而延长 CSSOM 构建时间。保持 CSS 选择器简单直接，有助于浏览器更快地完成 CSSOM 构建，从而缩短首屏渲染时间。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。