今日推荐：前端面试题——浏览器渲染原理
浏览器渲染流程
浏览器渲染页面包含六个核心阶段：HTML解析构建DOM树、CSS解析构建CSSOM树、合并生成渲染树、布局计算（Layout）、分层（Layer）、绘制（Paint）和合成（Compositing）。整个过程是流水线式的，任何修改都可能触发部分或全部重演。
回流与重绘
回流（Reflow）是重新计算元素的布局和几何属性，性能开销很大；重绘（Repaint）是重新绘制元素的外观，不改变布局，性能开销相对较小。回流一定会引起重绘，但重绘不一定会引起回流。触发回流的操作包括改变元素尺寸、位置、内容，以及添加/删除DOM节点等。
性能优化策略
- 批量操作DOM：使用
documentFragment或cssText一次性修改样式，避免频繁触发回流 - 读写分离：先读取布局属性，再批量写入，避免交替读写
- 使用transform和opacity：这两个属性仅触发合成层，不触发回流和重绘，可利用GPU加速
- 离线DOM操作：设置
display: none修改完成后再显示，减少中间状态的回流
渲染优化机制
现代浏览器通过渲染队列机制合并多个样式修改操作，智能重绘区域检测只重绘实际发生变化的区域，图层合成优化将页面分为多个图层分别处理后再合成，提升动画性能。
关键面试点
- 解释浏览器渲染的完整流程
- 区分回流和重绘，列举触发条件
- 描述CSS加载对DOM解析和渲染的影响
- 说明
async和defer属性的区别 - 如何通过Chrome DevTools分析性能瓶颈
