浏览器页面渲染流程

一、浏览器渲染流水线核心逻辑浏览器从接收 HTML 字节到页面显示的全流程核心分为5 个核心阶段 3 个关键优化点逻辑是字节 → 结构化 → 样式化 → 布局 → 绘制 → 合成每个阶段的输出是下一个阶段的输入且前序阶段修改会触发后续阶段重新执行性能优化关键。二、渲染流程拆解1.阶段 1解析 HTML → DOM 树Parse HTML → DOM Tree输入网络层传输的 HTML 字节二进制处理浏览器先将字节转换为字符UTF-8 解码词法分析将字符拆分为「标签 / 属性 / 文本」等 Token如div、classbox语法分析将 Token 组装为 DOM 节点构建树形结构DOM Tree输出DOM 树描述 HTML 结构每个节点对应文档中的元素 / 文本关键考点解析时遇到script会阻塞 DOM 解析需等待脚本执行 / 加载可通过 async/defer 优化遇到link relstylesheet会阻塞渲染但不阻塞 DOM 解析。2.阶段 2解析 CSS → CSSOM 树Parse CSS → CSSOM Tree输入内联 CSS、外部 CSS 文件、style 标签中的样式处理同样经过「字节→字符→Token→节点」的解析过程解析 CSS 选择器、属性、值构建 CSSOM 树包含样式的继承、优先级规则输出CSSOM 树描述元素的样式规则可计算每个 DOM 节点的最终样式关键考点CSSOM 构建是阻塞渲染的需等待所有 CSS 解析完成才能计算样式CSS 选择器从右向左匹配如box p先找所有 p再筛选父级有.box的这也是「避免复杂选择器」的原因。3. 阶段 3样式计算Style Calculation输入DOM 树 CSSOM 树处理为每个 DOM 节点匹配 CSSOM 中的样式规则计算节点的「计算样式」Computed Style解决样式冲突如优先级、继承输出带计算样式的 DOM 节点关键考点!important、行内样式、ID 选择器等优先级会影响计算结果浏览器会缓存计算样式仅修改样式时重新计算。4. 阶段 4布局Layout / Reflow输入带计算样式的 DOM 树处理计算每个节点的几何信息位置x/y、尺寸width/height、盒模型构建布局树Layout Tree仅包含「可见节点」隐藏节点如 display: none 会被排除输出布局树描述可见节点的几何位置关键考点布局是「流」式的一个节点的布局变化会触发父 / 子 / 兄弟节点的重新布局回流触发回流的操作修改尺寸width/height、位置top/left、DOM 增删、窗口.resize 等。5. 阶段 5绘制Paint输入布局树处理将布局树转换为「绘制记录」Paint Records记录绘制顺序如先画背景、再画文本、最后画边框浏览器将绘制记录提交给 GPU绘制到图层上输出像素信息未显示到屏幕关键考点触发重绘的操作修改颜色color、背景background、阴影box-shadow等不影响布局的样式重绘比回流性能消耗小但仍需避免频繁触发。6. 阶段 6合成Composite输入各图层的像素信息处理浏览器将页面划分为多个图层如 transform/opacity 会创建独立图层GPU 对各图层进行合成最终输出到屏幕输出可见的页面关键考点合成阶段是性能最优的修改 transform/opacity 仅触发合成不触发回流 / 重绘合理使用图层如 will-change: transform可减少性能消耗。三、渲染流程图流程图如下阶段性能消耗对比表阶段性能消耗触发操作示例优化建议回流Layout最高修改 width/height、DOM 增删、resize1. 批量修改样式 2. 脱离文档流修改position:absolute/fixed3. 使用 requestAnimationFrame重绘Paint中等修改 color、background、box-shadow1. 避免频繁修改可视样式 2. 合并样式修改合成Composite最低修改 transform、opacity优先使用这两个属性实现动画总结浏览器渲染流水线的核心是「从结构化到可视化」的递进过程每个阶段的输出是下一个阶段的输入性能优化的关键是「减少阻塞」和「避免高频回流/重绘」优先使用合成层属性transform/opacity