【前端面试】采用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