浏览器渲染流程

HTML的内容由标记和文本组成、也称标签

CSS又称 层叠样式表、由选择器和属性组成

JS 使页面内容动起来

渲染模块在执行过程中分为很多子阶段、输入的HTML经过这些子阶段、输出像素、这个处理过程称为 渲染流水线

1. 构建DOM树

   浏览器无法直接理解和使用html、需要先转化为其能理解的结构 - DOM树

   构建dom树的输入是简单的html文件、经过html解析器解析、输出 树状结构的DOM

   DOM和html的内容基本一致、但dom是保存在内存中的树状就结构、可以通过JS直接修改

2. 样式计算

   是为了计算出DOM节点中每个元素的具体样式

   1. 将CSS转化为浏览器可理解的结构 stylesheets

   2. 转换样式表中的属性值、使其标准化 eg. 2em -> 32px blue -> rgb(0,0,255)

   3. 计算出dom树中每个节点的具体样式

3. 布局计算

   计算dom树中可见元素的几何位置

   1. 创建布局树 遍历dom节点、将这些节点加载到布局中

   2. 布局计算 将布局运算的结果写回布局树

4. 分层

   为了更方便的实现3D变换、页面滚动或者使用z-indexing做z轴排序等

   渲染引擎还需要为特定的节点生成专用图层、并生成一棵对应的图层树LayerTree

   浏览器的页面其实是很多图层、这些图层叠加后合成了最终的页面

   并不是所有的布局树的每个节点都包含一个图层、若节点无对应图层、则从属于父节点的图层

   1. 拥有层叠上下文属性的元素会被提升为单独的一层

   2. 需要裁剪的地方也会被创建为图层

5. 绘制

   图层的绘制与画画的流程基本一致、会把一个图层的绘制拆分成很多小的绘制指令、然后将指令按照顺序组成一个待绘制列表

6. 栅格化

   绘制列表只是用来记录绘制顺序和绘制指令的列表、而实际上绘制操作是由渲染引擎中的合成线程来完成(图层绘制列表准备完成后、主线程会把绘制列表提交给合成线程)

   通常、栅格化过程会使用GPU来加速生成、使用GPU生成位图的过程叫 快速栅格化、生成的位图保存在GPU内存中

7. 合成

   所有图块被光栅化之后、合成进程会生成一个绘制图块的命令、提交给浏览器进程

   浏览器进程的viz组件、接收绘制命令绘制内容显示到浏览器

几个概念

重排: 通过JS或者CS修改元素几何位置、eg. 改变元素的宽、高、等会触发重新布局、解析之后的一系列子阶段、这个过程就叫重排、需要更新完整的渲染流水线、开销很大

重绘: eg. JS更改某些元素的背景色、布局阶段不会重新执行、直接进入绘制阶段、然后执行之后的子阶段、相对重排 少了布局和分层阶段、执行效率会高一些

直接合成阶段: eg. 使用CSS的transform来实现动画、可以避开重排和重绘阶段、直接在非主线程上执行合成动画操作、大大提升绘制效率