面试篇：（三十五）浏览器渲染与优化 - 2024 年前端性能面试重点

面试篇：（三十五）浏览器渲染与优化 - 2024 年前端性能面试重点

浏览器的渲染原理和性能优化是前端面试中的核心内容。理解浏览器的渲染过程，不仅有助于识别性能瓶颈，还能帮助开发者优化页面加载速度，提升用户体验。本文将详细介绍浏览器渲染流程、影响性能的因素及相关优化技巧，助你在 2024 年前端面试中更好地展示对性能优化的深刻理解。

---

1. 浏览器渲染的基本流程

浏览器从接收到 HTML 到最终呈现页面，渲染过程分为以下几个主要步骤：

1. 构建 DOM 树：解析 HTML，构建 DOM 树。DOM（Document Object Model）是一种对 HTML 的结构化表示。

2. 构建 CSSOM 树：解析 CSS，构建 CSSOM（CSS Object Model）树。

3. 生成渲染树：DOM 树和 CSSOM 树组合生成渲染树。渲染树仅包含要显示的节点，不会包含 display: none 的元素。

4. 布局（Layout）：计算渲染树中每个元素的位置和大小。

5. 绘制（Paint）：将布局阶段的元素渲染到屏幕上，包括背景颜色、文字、边框、阴影等。

6. 合成（Compositing）：将多个图层合成在一起，形成最终的页面。

---

2. 常见性能瓶颈及其原因

重排（Reflow）和重绘（Repaint） 是性能瓶颈的常见原因。

• 重排（Reflow）：当元素的布局或几何属性（例如宽度、高度）发生变化时，浏览器会重新计算布局，引发重排。重排往往会导致整个渲染树的重新构建，代价较高。

• 重绘（Repaint）：当元素的外观发生变化（例如颜色、背景）但