一张图看懂「浏览器渲染流程」：从 HTML 到像素

你在地址栏敲下网址，几毫秒后页面就出来了。中间浏览器其实忙了一串工序。一句话：把 HTML/CSS/JS 变成屏幕上的像素，要经过“解析 → 计算样式 → 排版 → 绘制 → 合成”几步。

一、像盖房子 + 贴壁画

1. 解析 HTML → DOM 树：把标签变成一棵“结构树”，像画出房屋的骨架图。
2. 解析 CSS → 样式规则：收集所有样式。
3. 计算样式：把样式规则套到每个节点上，算出“这个 div 该多大、什么颜色”。
4. 排版（Layout/重排）：根据大小和位置，算出每个盒子在屏幕上的精确坐标和尺寸——像确定每面墙在哪。
5. 绘制（Paint）：把每个盒子画成实际的像素（填色、描边、画文字）——像往墙上刷漆贴画。
6. 合成（Composite）：把各层叠在一起，送显卡出图。

二、为什么页面会卡

• 步骤 4（重排）和 5（重绘）比较贵，尤其是频繁改动布局（比如不停改宽高、增删节点）。
• 所以优化常围绕“少触发重排重绘”展开（见下篇）。

三、一句口诀

HTML 定结构、CSS 定样子、JS 改内容；浏览器先算“在哪、多大”，再“画出来”，最后“叠一起显示”。理解这条流水线，才知道卡顿卡在哪。

一句话：浏览器渲染就是“解析成树 → 算样式 → 排版定位 → 绘制像素 → 合成上屏”的流水线，慢常慢在排版和绘制这两步。