阅读 126

浏览器的渲染

优秀文章链接: www.xuanbiyijue.com/2020/07/25/…

渲染过程

构建DOM树

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

样式计算

  1. 将CSS转化为浏览器能够理解的结构styleSheets
  2. 转换样式表中的属性值,使其标准化
  • 如 2em 被解析成32px; red被解析成rgb(255,0,0); bold被解析成700...
  1. 计算DOM树中每个节点的具体样式
  • CSS继承规则
  • CSS层叠规则

布局阶段Layout

  1. 创建布局树
  • 遍历DOM树中的所有可见节点,并把这些节点加到局部树中
  • 而不可见的节点会被布局树忽略掉,如head标签下面的全部内容,再比如包含display:none样式的节点
  1. 布局计算
  • 计算布局树节点的坐标位置

分层 LayerTree

  1. 拥有层叠上下文属性的元素会被提升为单独的一层
  • 文档根目录 <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的元素
  1. 需要剪裁的地方也会被创建为图层

图层绘制

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

image.png

分块

  • 合成线程会将图层划分为图块(tile),这些图块的大小通常是256256或者512512

光栅化

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

合成和显示

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