目录
浏览器工作原理与流程
一、渲染开始时间点
用户访问页面的时候，浏览器网络线程进行网络通信获取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的内容在这个内部堆叠上下文中显示。
堆叠上下文的层级规则如下：
- 根元素（通常是HTML元素）形成一个堆叠上下文。
- 定位元素（position属性为relative、absolute或fixed）可以形成新的堆叠上下文。
- 元素的z-index属性可以指定其在堆叠上下文中的层级。
- 某些CSS属性和值，如opacity、transform、filter等，可以创建新的堆叠上下文。
⑤绘制-Paint
为分层结果的每⼀层⽣成如何绘制的指令，并不是真的绘制。
> 到这里渲染主线程的工作就结束了，剩下的任务交给其他线程完成。
评论记录：
回复评论：