浏览器的渲染

4年前更新

1750

渲染过程

构建DOM树

输入内容是HTML文件，经有HTML解析器解析，输出树状的DOM。
DOM是保存在内存中的树状结构，可以通过JavaScript来查询或修改其内容。

样式计算

将CSS转化为浏览器能够理解的结构styleSheets
转换样式表中的属性值，使其标准化

如 2em 被解析成32px； red被解析成rgb(255,0,0)； bold被解析成700…

计算DOM树中每个节点的具体样式

CSS继承规则
CSS层叠规则

布局阶段Layout

创建布局树

遍历DOM树中的所有可见节点，并把这些节点加到局部树中
而不可见的节点会被布局树忽略掉，如head标签下面的全部内容，再比如包含display:none样式的节点

布局计算

计算布局树节点的坐标位置

分层 LayerTree

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

文档根目录 <html>
position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素
position值为fixed（固定定位）或sticky（）的元素（sticky定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）
flex容器的子元素，且z-index值不为auto
grid容器的子元素，且z-index值不为auto
opacity属性小于1的元素
transform属性值不为none的元素
filter属性值不为none的元素

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

图层绘制

渲染引擎会把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制的列表
绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是有渲染引擎中的合成线程来完成的
当图层的绘制列表准备好之后，主线程会把该绘制列表提交给合成线程

分块

合成线程会将图层划分为图块（tile），这些图块的大小通常是256256或者512512

光栅化

合成线程会按照视口附件的图块有优先生成位图
实际生成位图的操作是有栅格化来执行的
所谓栅格化，是指将图块转化为位图
位图是栅格化执行的最小单位
渲染进程维护了一个栅格化的线程池，所有图块的栅格化都是在线程池内执行
栅格化过程都会使用GPU来加速生成
使用GPU生成位图的过程叫快速栅格化，或者GPU栅格化
渲染进程把生成图块的指令发送给GPU，然后在GPU中执行生成图块的位图，并保存在GPU的内存中

合成和显示

一旦所有的图块都被光删化，合成线程就会生成一个绘制图块的命令————“DrawQuad”，然后将该命令提交给浏览器进程
浏览器进程里面有一个叫viz的组件，用来接收合成线程发过来的“DrawQuad”命令，然后根据“DrawQuad”命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。

© 版权声明

文章版权归作者所有，未经允许请勿转载。

THE END

喜欢就支持一下吧

相关推荐