浏览器从 HTML 解析到首屏绘制的关键渲染流水线与阻塞资源影响

浏览器从拿到 HTML 到首屏绘制，大致会经历解析、构建树、布局、绘制和合成这几步。

HTML 下载完成后，浏览器会边下载边解析 HTML，生成 DOM Tree。解析过程中如果遇到 CSS，比如 <link rel="stylesheet" ，会发起 CSS 下载并解析成 CSSOM Tree。DOM 和 CSSOM 都准备好之后，浏览器会合成 Render Tree，也就是只包含可见节点以及对应样式的渲染树，比如 display: none 的节点不会进入渲染树。

Render Tree 构建完成后会进入 Layout，也叫 Reflow，计算每个元素在页面中的位置和尺寸，比如宽高、坐标、盒模型信息。布局完成后进入 Paint 阶段，把文字、颜色、边框、阴影、背景等绘制成绘制指令。之后浏览器会根据图层进行 Composite 合成，最终由 GPU 或浏览器合成线程把内容显示到屏幕上，这样用户就能看到首屏内容。

这里比较关键的是阻塞资源的影响。

CSS 是典型的渲染阻塞资源。因为浏览器必须知道元素的最终样式，才能正确构建 Render Tree 和布局，所以外部 CS