得鹿梦鱼 得鹿梦鱼

渲染基础

renderObject树

renderObject树: 是为了布局计算和渲染等机制而建立的一种新的内部表示

HTML文档中的元素节点按照用户是否可见被分为2类,一种是可视化节点(div/img),一种是非可视化节点meta

对于可视节点,webkit会为他们建立相应的renderobject树,一个renderobject对象保存了为绘制DOM节点所需要的各种信息

创建renderObject树的时机

  1. DOM树的document节点
  2. DOM树中的可视节点
  3. 某些情况下的匿名renderObject节点

网页层次和RenderLayer树

webkit会为网页的层次创建相应的renderLayer对象,当某些类型的renderobject的节点或者具有某些css样式的renderobject节点出现额时候,webkit会为这些节点renderlayer对象,

renderlayer树基于renderobject树建立的一颗新树

创建renderlayer树的时机

  1. DOM树的document节点对应的renderview节点
  2. DOM树的document的子女节点
  3. 显示指定css位置的renderobject节点
  4. 有透明效果的renderobject节点
  5. 节点有溢出、透明度、反射等效果的renderobject节点
  6. 使用canvas的renderobject节点
  7. 使用音视频节点对应的renderobject节点

绘图上下文

绘图上下文可以分为2类

2D图形

提供绘图单元的绘制接口以及设置绘图的样式

3D图形

支持css3d/webgl等

渲染方式

  • 软件渲染
  • 硬件加速渲染