1、浏览器渲染过程

浏览器的渲染过程共分为几个过程:
JavaScript ——> Style ——> Layout ——> Paint ——> Composite

image.png

1.1. Layout阶段

计算DOM节点的最终样式，生成Layout tree，这棵树类似DOM树，树中记录了参与的页面的布局以及样式，节点的最终布局尺寸以及位置。

该阶段中主要是分为2个步骤：一个是样式计算，另外一个是生成布局对象(LayoutObject)

cssom.png

• 浏览器计算样式的步骤：
  首先浏览器会遍历一遍DOM，然后在CSSOM中查找对应元素匹配的样式，找到对应的元素的样式定义的时候，接着进行CSS选择器优先级排序，得到对应元素最终计算后的样式，以类ComputedStyle体现出来。
  DOM遍历完之后，就会得到一个新的树，就是Layout阶段的Layout tree，这棵树虽然是从DOM树中构建而来，但并不是建立在DOM树上，也就是Layout tree有自己的根节点和孩子节点。

1.2.Paint阶段

该阶段会遍历Layout tree中的每个节点，根据节点布局方式和内容，调用节点的业务逻辑(比如：绘制Rect、Border、Text等)，这些绘制结果以draw commands的形式保存下来。

1.3. 使用devtool查看渲染

image.png

蓝色的虚线之前表示触发了浏览器的DomContentLoaded事件，表示浏览器已经完成了对页面的解析工作，它对应的Main（JS线程）在这之前完成了对HTML的解析工作，该过程也就是Parse HTML阶段。

1.4、render树

html的dom树 + css style 生成了render树

image.png

2、V8引擎解析js代码

在解析js代码的过程中，主要历经三个过程，①通过parser解析器生成AST抽象语法树 ②通过interpreter将AST抽象语法树解析成机器能够识别的字节码 ③通过compiler编译器编译代码