阅读 44

浏览器知识点5:渲染流程

渲染流程

  1. 构建DOM树:html -> DOM 结构
  2. 样式计算:
  • css 文本 -> styleSheets
  • 样式表中属性值标准化(exp:2em -> 32px)
  • 计算DOM树中每个节点的具体样式:继承、层叠
  1. 布局阶段:计算DOM树中可见元素的集合位置
  • 创建布局树 layoutTree

  • 遍历DOM 树中所有可见节点,加到布局树中

  • 忽略不可见节点,exp:head,display:none

  • 布局计算

  1. 分层:为特定的节点生成专用的图层,生成对应的图层树 layerTree
  • 拥有层叠上下文:position、z-index、filter、opacity
  • 需要剪裁clip (内容超出,有滚动条)
  1. 绘制:绘制顺序+绘制指令=绘制列表
  2. 分块
  • 合成线程会讲图层划分为图块(tile)
  1. 栅格化:图块->位图(视口附近图块优先生成位图)
  • GPU加速生成位图->快速栅格化,保存在GPU内存中
  1. 合成:发送绘制图块命令DrawQuad,浏览器根据此消息生成页面,显示
文章分类
前端
文章标签