前端面试题：浏览器渲染流程

1. 浏览器渲染一个页面的主要阶段？

• 解析 HTML 生成 DOM 树。
• 解析 CSS 生成 CSSOM。
• 构造渲染树。
• 布局（回流）。
• 绘制（重绘）。

2. 什么是回流与重绘？

• 回流：计算元素位置和大小。
• 重绘：绘制视觉样式。
• 回流比重绘开销更大。

3. 哪些操作会触发回流？

• 修改几何属性：宽高、margin、padding。
• 改变 DOM 结构。
• 读取会触发布局的属性：offsetWidth、scrollHeight。

4. 如何优化浏览器渲染性能？

• 减少 DOM 操作。
• 使用 CSS 动画代替 JS 动画。
• 批量修改样式。
• 避免强制同步布局。

5. 什么是合成层？

• 浏览器将部分元素提升到 GPU 层进行绘制。
• 常用于动画和固定定位元素。

6. 面试常问的页面首屏优化点有哪些？

• 关键渲染路径优化。
• 减少阻塞脚本。
• 延迟加载非关键资源。