【前端面试】采用react前后，浏览器-解析渲染UI的变化

浏览器渲染html

浏览器解析和渲染 UI（用户界面），特别是 HTML 文档，是一个复杂的过程，涉及到多个阶段。以下是浏览器从接收 HTML 文档到显示渲染后的页面的一般步骤：

1. 下载 HTML 文档：

• 用户输入 URL 或点击链接时，浏览器会向服务器请求 HTML 文档。
• 服务器响应请求，并将 HTML 文档发送回浏览器。

2. 解析 HTML：

• 浏览器开始解析 HTML 文档，构建一个 DOM（文档对象模型）树。
• DOM 树是由节点组成的，每个节点代表 HTML 文档中的一个元素。

3. 解析 CSS：

• 浏览器同时解析关联的 CSS 样式表，构建一个 CSSOM（CSS 对象模型）树。
• CSSOM 树包含了所有样式信息，用于确定如何显示 DOM 树中的每个元素。

4. 构建渲染树：

• 浏览器将 DOM 树和 CSSOM 树合并，创建一个渲染树。
• 渲染树包含了 DOM 树中的所有可见元素，以及它们的样式信息。

5. 布局（Layout）：

• 浏览器对渲染树进行布局，也称为“流布局”（flow layout）。
• 这一步骤确定了每个元素在页面上的确切位置和大小。

6. 绘制（Painting）：

• 浏览器使用渲染树的信息来绘制页面上的每个元素。
• 这一步骤涉及到将元素的样式、颜色、图片等绘制到屏幕上。

7. 合成（Compositing）：

• 对于有层叠上下文（如使用 CSS 的 transform、opacity 或 filter 属性）的元素，浏览器会进行合成。
• 合成是将页面的各个部分合并到最终的像素输出上的过程。

8. 显示页面：

• 一旦绘制和合成完成，浏览器就会显示渲染后的页面。
• 用户现在可以看到并与之交互。

9. JavaScript 执行：

• 如果 HTML 文档中包含 JavaScript 代码，浏览器会在不影响解析的情况下延迟执行，或者在文档解析完成后执行。
• JavaScript 可以修改 DOM 和 CSSOM，这可能导致浏览器重新执行上述渲染流程的一部分。

10. 重排（Reflow）和重绘（Repaint）：

- 当 DOM 或 CSSOM 发生变化时，浏览器可能需要重新执行布局、绘制或合成。
- 这些变化可能是由于用户交互、JavaScript 操作或浏览器窗口大小的改变。

浏览器的渲染引擎（如 Chrome 的 Blink、Firefox 的 Geck