HTML的内容由标记和文本组成、也称标签
CSS又称 层叠样式表、由选择器和属性组成
JS 使页面内容动起来
渲染模块在执行过程中分为很多子阶段、输入的HTML经过这些子阶段、输出像素、这个处理过程称为 渲染流水线
-
构建DOM树
浏览器无法直接理解和使用html、需要先转化为其能理解的结构 - DOM树
构建dom树的输入是简单的html文件、经过html解析器解析、输出 树状结构的DOM
DOM和html的内容基本一致、但dom是保存在内存中的树状就结构、可以通过JS直接修改
-
样式计算
是为了计算出DOM节点中每个元素的具体样式
将CSS转化为浏览器可理解的结构 stylesheets
转换样式表中的属性值、使其标准化 eg. 2em -> 32px blue -> rgb(0,0,255)
计算出dom树中每个节点的具体样式
-
布局计算
计算dom树中可见元素的几何位置
创建布局树 遍历dom节点、将这些节点加载到布局中
布局计算 将布局运算的结果写回布局树
-
分层
为了更方便的实现3D变换、页面滚动或者使用z-indexing做z轴排序等
渲染引擎还需要为特定的节点生成专用图层、并生成一棵对应的图层树LayerTree
浏览器的页面其实是很多图层、这些图层叠加后合成了最终的页面
并不是所有的布局树的每个节点都包含一个图层、若节点无对应图层、则从属于父节点的图层
拥有层叠上下文属性的元素会被提升为单独的一层
需要裁剪的地方也会被创建为图层
-
绘制
图层的绘制与画画的流程基本一致、会把一个图层的绘制拆分成很多小的绘制指令、然后将指令按照顺序组成一个待绘制列表
-
栅格化
绘制列表只是用来记录绘制顺序和绘制指令的列表、而实际上绘制操作是由渲染引擎中的合成线程来完成(图层绘制列表准备完成后、主线程会把绘制列表提交给合成线程)
通常、栅格化过程会使用GPU来加速生成、使用GPU生成位图的过程叫 快速栅格化、生成的位图保存在GPU内存中
-
合成
所有图块被光栅化之后、合成进程会生成一个绘制图块的命令、提交给浏览器进程
浏览器进程的viz组件、接收绘制命令绘制内容显示到浏览器
几个概念
重排: 通过JS或者CS修改元素几何位置、eg. 改变元素的宽、高、等会触发重新布局、解析之后的一系列子阶段、这个过程就叫重排、需要更新完整的渲染流水线、开销很大
重绘: eg. JS更改某些元素的背景色、布局阶段不会重新执行、直接进入绘制阶段、然后执行之后的子阶段、相对重排 少了布局和分层阶段、执行效率会高一些
直接合成阶段: eg. 使用CSS的transform来实现动画、可以避开重排和重绘阶段、直接在非主线程上执行合成动画操作、大大提升绘制效率
