Web页面加载过程

浏览器进程主要负责用户交互、子进程管理和文件存储等功能。
渲染进程的主要职责是把从网路下载的所有内容解析为可以显示和交互的页面。
网络进程是面向渲染进程和浏览器进程等提供网络下载功能。

用户发出url请求到页面开始解析的这个过程称为导航，过程如下：

用户从浏览器进程中输入请求信息： 用户在浏览器地址栏中输入URL或通过其他方式触发浏览器请求。
网络进程发起URL请求： 浏览器的网络进程负责发起对输入URL的请求。它执行地址解析、域名解析，并与服务器建立网络连接，发起HTTP请求。
服务器响应URL请求后，浏览器进程准备渲染进程： 务器响应请求，返回HTML等资源。如果有缓存，并且缓存有效，浏览器可能会使用本地缓存而不向服务器发起请求。浏览器进程收到响应后，准备创建或复用渲染进程。
渲染进程准备好之后向渲染进程提交页面数据，即提交文档阶段： 浏览器进程将接收到的HTML等数据传递给渲染进程。渲染进程在此阶段会构建DOM树、CSSOM树，计算布局，形成渲染树。
渲染进程开始解析页面和加载子资源，完成页面的渲染： 渲TML，加载并解析CSS，执行JavaScript，加载子资源如图片、字体等。随着资源的加载和解析，浏览器逐渐构建出完整的渲染树，并进行布局和绘制，最终将页面渲染到用户界面上。

渲染流程——HTML、CSS、JS如何变成页面

HTML的内容由标记和文本组成。
CSS又称层叠样式表，由选择器和属性构成
JavaScript是一种高级、解释型的编程语言，通常用于在网页上实现交互性和动态效果。

渲染进程执行的主要流程包括以下步骤：

1. HTML 解析（HTML Parsing）（也就是构建DOM树）：

浏览器接收到从浏览器进程传递的 HTML 数据。
HTML 解析器开始解析 HTML 代码，根据标签和内容构建 DOM 树。
DOM 树表示文档的结构，包括 HTML 元素及其嵌套关系。

2.CSS 解析（CSS Parsing）:

浏览器接收并解析 CSS 文件，构建 CSSOM 树。
CSS 解析器处理样式表，将样式规则转换为浏览器可以理解的结构。
CSSOM 树表示页面的样式信息，包括各个元素的样式属性。

3. 合并构建渲染树（Construct Render Tree）:

渲染进程将构建好的 DOM 树和 CSSOM 树进行合并，形成渲染树（Render Tree）。
渲染树仅包含需要渲染的节点，忽略不可见的元素（如设置了 display: none 的元素）。

4. 布局（Layout）:

渲染引擎计算每个渲染树节点在屏幕上的位置和大小，进行布局（Layout）。
这一步也被称为回流（Reflow），涉及盒模型计算、浮动元素的定位等。

5. 绘制（Painting）:

渲染引擎遍历渲染树，将每个节点绘制到屏幕上，即进行绘制（Painting）操作。
绘制包括填充颜色、绘制边框、渐变、图像等。

6. 合成（Compositing）:

如果页面中有多个图层（例如，通过 CSS 属性 transform 或 opacity 创建的图层），渲染引擎会将这些图层合成（Compositing）成最终的屏幕图像。
合成操作通常由 GPU（图形处理单元）执行，以提高性能。

7. 显示页面（Display）:

最终，渲染引擎将绘制好的页面显示给用户。
用户可以看到页面上的内容，并与页面进行交互。

这些步骤构成了渲染进程执行的基本流程。这个过程是逐步发生的，每一步都可能触发后续步骤的重新执行。例如，用户的交互、动态样式变更、JavaScript 操作等都可能导致重新计算布局和绘制。浏览器通过优化技术（如异步渲染、合并图层等）来提高页面的渲染性能和用户体验。

相关概念

1、重排也称为回流——更新了元素的几何属性

指浏览器为了重新渲染部分或全部页面布局，而计算元素的几何属性的过程。当发生元素几何属性的变化时，浏览器需要重新计算并应用这些变化，以确保页面的正确显示。重排是一种比较昂贵的操作，因为它涉及到整个页面布局的重新计算。

以下是导致重排的一些常见操作：

改变窗口大小： 当用户调整浏览器窗口大小时，页面中的元素可能需要重新布局，以适应新的窗口大小。
改变字体大小： 如果元素的字体大小变化，周围元素的布局可能会受到影响，因此需要进行重排。
增删元素： 添加、删除或修改页面元素可能会影响整个页面布局，导致重排。
改变元素的位置： 如果通过 JavaScript 或 CSS 将元素移动到新的位置，周围元素的布局可能需要进行重新计算。
改变元素的尺寸： 修改元素的尺寸，包括宽度、高度、内边距、边框等，可能引起周围元素的重新布局。
获取某些属性： 一些获取元素属性的操作，例如使用 offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft 等，也会触发重排。

重排需要更新完整的渲染流水线，所以开销最大。为了优化性能，应该尽量减少导致重排的操作，合并多个 DOM 操作，使用批量处理等技术来减少重排的次数。此外，可以使用 CSS3 的硬件加速属性（如 transform 和 opacity）来最小化某些情况下的重排。

2、重绘——更新了元素的绘制属性

指当元素样式的改变不影响它在页面布局中的位置时，浏览器只需要重新绘制元素的外观而不需要进行重新布局的过程。重绘相对于重排而言，代价较小，因为它只涉及到元素的外观，而不需要重新计算布局。直接进入绘制阶段然后执行后续子阶段。

重绘省去了布局和分层阶段，所以执行效率比重排操作要高效。

以下是导致重绘的一些常见操作：

颜色变化： 修改元素的背景颜色、文字颜色等。
边框样式变化： 修改元素的边框样式，如颜色、宽度等。
文字样式变化： 修改元素的文字样式，如字体、字号、字重等。
阴影和透明度变化： 修改元素的阴影或透明度。
背景图片变化： 修改元素的背景图片。
visibility 属性变化： 使用 visibility: hidden; 或 visibility: visible; 触发重绘，因为元素的布局不受影响。
outline 变化： 修改元素的轮廓样式。

这些操作只会引起元素的外观变化而不影响元素在页面中的位置。与重排相比，重绘的代价较小，但仍然需要一定的计算资源。为了减少重绘的影响，可以采取一些优化措施，如使用合适的 CSS 属性（例如 transform 和 opacity）来实现动画，以降低性能开销。

3、直接合成阶段

css的transfrom来实现动画效果，既不需要布局也不需要绘制，也就避开了布局和绘制两个子阶段。相对于重绘和重排，合成能大大提升绘制的效率。

图层划分： 在布局和绘制完成后，渲染引擎会将页面分成多个图层。图层是页面的独立渲染区域，可以包含一个或多个元素。通常，具有复杂变换、透明度、动画效果的元素会被放置在单独的图层中。
图层合成： 直接合成阶段的主要任务是将这些图层进行合成，创建最终的屏幕图像。这个过程通常由 GPU（图形处理单元）来执行，因为 GPU 可以并行处理图层的合成操作，提高性能。
硬件加速： 如果浏览器支持硬件加速，合成操作会通过 GPU 来执行。硬件加速可以加速图层的合成和渲染，特别是对于复杂的动画和变换效果。一些 CSS 属性，如 transform 和 opacity，可以触发硬件加速。
图层混合和过滤： 在直接合成阶段，可以对图层进行混合和过滤操作。混合操作指的是将一个图层的像素与另一个图层的像素进行混合，形成最终的图像。过滤操作用于对图层进行滤镜效果，例如模糊、灰度等。
图层的绘制顺序： 合成操作会考虑图层的绘制顺序，确保页面元素按正确的顺序进行合成。这一点对于正确渲染页面的可见性和层次结构至关重要。
减少页面闪烁： 直接合成阶段的优化目标之一是减少页面闪烁。通过在 GPU 上合成图层，可以更快地生成最终图像，减少页面元素闪烁的可能性。

直接合成阶段是为了优化渲染性能和提高用户体验。通过将复杂的图层合成和硬件加速，浏览器可以更有效地处理动画、变换和其他复杂效果，确保页面流畅度和响应性。

Web页面加载过程及渲染流程