CSS 会阻塞 DOM 解析吗？

浏览器的渲染

浏览器的渲染流程如下：

图：WebKit 主流程

图：Mozilla 的 Gecko 呈现引擎主流程（3.6）

结合上图，一个完整的渲染流程如下：

• 渲染进程解析 HTML 内容转换为能够读懂的 DOM 树结构，解析 CSS 为 CSSDOM
• 把 DOM 和 CSSOM 结合起来生成渲染树(Render Tree)
• 渲染树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标
• 把渲染树展示到屏幕上。再下一步就是绘制，即遍历渲染树，并使用UI后端层绘制每个节点。

值得注意的是：

关键的点在于上述的 4 步并不是以严格顺序执行的。渲染引擎会以最快的速度展示内容，也就是说，浏览器一边解析 HTML，一边构建渲染树，构建一部分，就会把当前已有的元素渲染出来。如果这个时候外部样式并没有加载完成，渲染出来的就是浏览器默认样式了。

其它阶段也是如此。由于浏览器会尝试尽快展示内容，所以内容有时会在样式还没有加载的时候展示出来。这就是经常发生的FOCU(flash of unstyled content)或白屏问题。