浏览器渲染揭秘：从加载到显示的全过程；浏览器工作原理与详细流程

浏览器工作原理与流程

一、渲染开始时间点

二、渲染主线程的渲染流程

2.1、渲染流程总览

2.2、渲染具体步骤

①解析html-Parse HTML

②样式计算-Recalculate Style

③布局-Layout

④分层-Layer

浏览器工作原理与流程

一、渲染开始时间点

用户访问页面的时候，浏览器网络线程进行网络通信获取HTML代码，然后进入渲染主线程的消息队列进行包装，得到渲染任务后按需交由渲染主线程进行渲染。

二、渲染主线程的渲染流程

2.1、渲染流程总览

总流程如下图所示：

2.2、渲染具体步骤

①解析html-Parse HTML

该步骤主要生成DOM树和CSSOM树。html代码解析后生成DOM树，css代码解析后生成CSSOM树。

在解析过程中，为了提⾼解析效率，浏览器会启动⼀个预解析器率先下载和解析 CSS。

渲染主线程遇到 JS 时必须暂停⼀切⾏为，等待下载执⾏完后才能继续，预解析线程可以分担⼀点下载 JS 的任务，这里主要是因为JS可能会改变DOM树，所以需要先解析，但如果声明是异步加载，那就不会暂停。

②样式计算-Recalculate Style

样式计算的目的是将HTML解析获得的DOM树和CSSOM树对应起来，只有DOM与CSSOM对应起来才能进行布局，为后面生成布局树奠定基础。

有一种说法将DOM树与CSSOM树绑定后的树称为“渲染树”。笔者个人认为在布局树还没生成之前，叫它为渲染树有些过早了。

③布局-Layout

根据计算好的样式来生成布局树。布局树包含了之后渲染后呈现给我们的所有信息。

这里有一个误区，就是认为布局情况依赖DOM元素，所以布局树和DOM树应该是一一对应的。

这句话是错误的，只能说布局树和可见内容是一一对应的，但是和DOM树并不一定一一对应。反例包括：

1、display值为none的元素，只是不可见，但是依然会添加到DOM树中，而布局树中不会添加该元素。

2、before伪类添加的元素，由于不算做一个单独的元素，所以不会添加到DOM树中，但是会在布局中显示，所以会添加到布局树中。

3、浏览器在渲染过程中为了保持布局的连贯性和符合CSS规范会自动创建一些布局盒子：匿名行盒与匿名块盒，它们只会在布局树中添加，而不会影响DOM树。

④分层-Layer

在现代浏览器中，为了优化渲染性能，渲染树会被分解成多个层（Layers）。每个层可以独立于其他层进行渲染和合成，这有助于减少绘制和合成的工作量。

跟堆叠上下文有关的属性，会影响分层，比如z-index，opacity、transform、filter，或者元素被设置为will-change，以及部分动画和过度效果可能也会被分为新的层。

相关拓展

opacity属性与堆叠上下文有关，因为当元素的opacity值小于1时，它将创建一个内部的堆叠上下文。这意味着，即使元素的z-index值较低，它的不透明部分仍然可以覆盖在其后面的元素的不透明部分。这可能导致一些不可预见的层叠效果，因为元素的不透明度会影响其在堆叠上下文中的行为。

例如，假设有两个元素A和B，A在B的上方，A的z-index值较高，但A的opacity为0.5，B的opacity为1。在这种情况下，A的不透明部分将覆盖B，但A的半透明部分将允许B的内容显示出来。这是因为A的半透明部分创建了一个内部堆叠上下文，而B的内容在这个内部堆叠上下文中显示。

堆叠上下文的层级规则如下：