浏览器渲染原理

浏览器渲染原理

1.parseHTML

网络线程在接受到HTML文件后会生成一个渲染任务，推入到渲染主线程的消息队列中，在事件循环的作用下，渲染主线程取出渲染任务并执行

为了快速解析文件，在解析开始之前，会启动预解析线程，遇到css文件就下载，遇到js就执行，如果解析时遇到css而预解析线程还没下载完成，主线程不会等待，但如果是js，主线程会暂停所有任务

在解析完成后，会生成DOM树和CSSOM树

2.1.生成DOM树和CSSOM树

CSSOM树: 包含StyleSheetList -> CSSStyleSheet -> CSSStyleRule

StyleSheetList: 包含不同的StyleSheet，一共有四种： 内部样式表，内联样式表，外部样式表，默认样式表

CSSStyleRule: 包含选择器和声明

2.2.合并DOM树和CSSOM树（样式计算）

样式计算，计算出最终样式，比如color: red会变成color: rgb(255,0,0)

拓展

1. CSS属性值的计算过程

   1. 层叠
   2. 继承

2. 视觉格式化模型

   1. 盒模型
   2. 包含块

3.生成layout树

合并后的dom树和与之对应生成的layout树不一定一一对应，display:none的元素,没有几何信息，不会存在在layout树中。或者说伪元素在DOM树中不存在，但是由于他有几何信息，会出现在layout树中。

在layout树中：

行盒块盒不能相邻
内容必须在行盒中

如果相邻，会在行盒上层创建匿名块盒包裹行盒
如果内容不在行盒中，会在内容外部套一层匿名行盒

这也会导致layout树和dom树不一样

4.分层

浏览器主线程自动分层，分层可以减少重绘的次数和数量，优化性能

如果经常需要重绘，可以在css中使用will-change更大程度影响分层。

5.绘制

主线程成绘制的指令（与canvas类似），每层都会生成单独的绘制指令。渲染主线程工作到此为止，剩余步骤交给其余线程。

6.分块

完成绘制之后，主线程会把每个图层的绘制信息交给合成线程进行划分快操作。
分块将每一层分为更小的块，优先绘制离视口近的区域。
分块工作交给合成线程处理，合成线程也处于渲染进程中，它可以启动许多线程，多线程处理分块。会从线程池中挑取多个线程完成工作

7.光栅化

把每个块变成位图，包含每个点的像素信息，优先处理靠近视口的块。光栅化会在gpu中进行。光栅化的结果就是一块一块的位图

8.画

合成线程计算出每个位图在屏幕上的位置，生成quad信息，并把quad送进gpu，gpu再委派给其他硬件进行计算

transform也在画的过程中进行，不在主线程中进行，因此transform效率高

quad：指引信息，描述位图的位置距离屏幕的距离

因为渲染进程处在沙盒中，与硬件环境隔离，提高安全性，所以不能直接委派任务给硬件，要先交给gpu

整体流程

ques:

1. 什么是reflow

   reflow的本质就是重新计算layout树，layout树之后的分层、绘制、分块、光栅化、画都会根据情况决定重新执行与否。

   为了避免layout树的重复计算，浏览器异步处理对layout树的操作，在js执行完之后，取出reflow的任务批量处理，这也是为什么dom元素修改是微任务的原因
   
   也因此，浏览器获取dom信息时，可能会得到修改前的信息
   
   修改颜色等属性并不会触发reflow，因为并没有修改几何信息

2. 什么是repaint

   repaint的本质就是重新根据分层信息重新计算了绘制指令。改动了可见元素的属性后，就会触发repaint。

   由于布局的几何信息也属于可见元素的属性，因此reflow触发也一定会触发repaint