渲染基础
renderObject树
renderObject树: 是为了布局计算和渲染等机制而建立的一种新的内部表示
HTML文档中的元素节点按照用户是否可见被分为2类,一种是可视化节点(div/img),一种是非可视化节点meta
对于可视节点,webkit会为他们建立相应的renderobject树,一个renderobject对象保存了为绘制DOM节点所需要的各种信息
创建renderObject树的时机
- DOM树的document节点
- DOM树中的可视节点
- 某些情况下的匿名renderObject节点
网页层次和RenderLayer树
webkit会为网页的层次创建相应的renderLayer对象,当某些类型的renderobject的节点或者具有某些css样式的renderobject节点出现额时候,webkit会为这些节点renderlayer对象,
renderlayer树基于renderobject树建立的一颗新树
创建renderlayer树的时机
- DOM树的document节点对应的renderview节点
- DOM树的document的子女节点
- 显示指定css位置的renderobject节点
- 有透明效果的renderobject节点
- 节点有溢出、透明度、反射等效果的renderobject节点
- 使用canvas的renderobject节点
- 使用音视频节点对应的renderobject节点
绘图上下文
绘图上下文可以分为2类
2D图形
提供绘图单元的绘制接口以及设置绘图的样式
3D图形
支持css3d/webgl等
渲染方式
- 软件渲染
- 硬件加速渲染