浏览器渲染主流程（渲染管线）：解析 HTML 构建 DOM 树，解析 CSS 构建 CSSOM 树，两者合并成渲染树（Render Tree，不含 display:none 节点）；然后布局/回流（Layout/Reflow）计算每个节点的几何位置和大小；再绘制（Paint）将各层栅格化为像素；最后合成（Composite）把各图层交给 GPU 合成显示。整个过程是增量完成的，浏览器会边下载边解析渲染。JS 会阻塞解析（除非 defer/async），CSS 会阻塞渲染。
重排与重绘：重排（Reflow）是元素几何属性变化（宽高、位置、增删节点）导致布局重新计算，代价高，且会影响后续元素；重绘（Repaint）是外观变化（颜色、背景、visibility）不引起几何变化，只需重新绘制，代价较低。重排必然引起重绘，重绘不一定引起重排。
优化方向：减少 DOM 操作次数、用 class 切换代替逐条改 style、对频繁元素用 transform/opacity（走合成层，跳过布局和绘制）、读写分离避免强制同步布局。追问方向：强制同步布局（layout thrashing）、will-change 的作用与代价、首屏加载的解析阻塞细节。