浏览器渲染页面的整个过程

浏览器的渲染机制可以分为以下几个步骤： 1. 构建 DOM 树：根据 HTML 文本构建 DOM 树，即将 HTML 文本解析成一个个的节点，然后将这些节点按照其在文档中的层级关系组成一棵树。 2. 构建 CSSOM 树：根据 CSS 文本构建 CSSOM 树，即将 CSS 文本解析成一个个的样式规则，然后将这些样式规则按照其在文档中的层级关系组成一棵树。 3. 合并生成渲染树：将 DOM 树和 CSSOM 树组合成渲染树（也称为呈现树或布局树）。渲染树只包含需要显示的节点和这些节点的样式信息。渲染树的构建过程中，浏览器会忽略掉那些不需要显示的节点，例如 head 标签、display:none 的节点等。 4. 计算布局信息：根据渲染树计算每个节点在屏幕上的位置和大小，这个过程被称为布局或排版（layout 或 reflow）。布局是一个相当昂贵的操作，因为浏览器需要遍历渲染树的每个节点，并根据节点的样式、大小、位置等信息计算其在屏幕上的位置和大小。 5. 绘制页面：根据渲染树和布局信息，将页面绘制到屏幕上，这个过程被称为绘制（painting 或 rasterization）。绘制的过程中，浏览器会将渲染树中每个节点的内容转换成位图，然后将这些位图组合成一张完整的页面。 6. 提交更新：将绘制好的页面提交到 GPU，由 GPU 将其显示到屏幕上。 以上是浏览器渲染机制的主要流程，其中布局（layout 或 reflow）是整个渲染过程中最耗时的步骤，因此在开发中需要尽可能减少布局的次数，以提高页面的性能表现。