webkit之渲染基础
使用以下基础的前端代码来说明。
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div>abc</div>
<canvas id="webg1" width="80" height="80"></canvas>
<a href="mailto:[email protected]?subject=feedback">email me</a>
<img src="" alt="">
<input type="button" name="" />
<select name="" multiple>
<option value="">option</option>
</select>
<table>
<tr>
<td>data</td>
</tr>
</table>
<script>
var canvas = document.getElementById('webg1')
var g1 = canvas.getContext('experimental-webg1')
if (g1) {
alert("There's no WebGl context available. ")
return
}
</script>
</body>
</html>
上面代码经过 WebKit 解释之后，生成 DOM 树，也很容易想象到。在 DOM 树构建完成之后，WebKit 会为 DOM 树节点构建 RenderObject 树。
-
不可视节点： 在 DOM 树中，该节点用户不可见，只是起到一些其他方面而不是显示内容的作用。如 “meta” 、“head”、“script” 节点等。 -
可视节点： 在 DOM 树中，该节点用户可见，可以显示一块区域，如文字、图片、2D 图形等。
WebKit 处理影子 DOM 没有什么特别的不同，虽然 JavaScript 代码没法访问影子 DOM ，但是 WebKit 需要创建并渲染 RenderObject。
网页层次和 RenderLayer 树
网页是有层次结构的，可以分层的，一是为了方便网页开发者开发网页并设置网页的层次，二是为了 WebKit 处理上的便利，为了简化渲染的逻辑
RenderLayer 树是基于 RenderObject 树建立起来的一棵新树。RenderLayer 节点和 RenderObject 节点不是一一对应关系，而是一对多的关系。
RenderObject 节点需要建立新的 RenderLayer 节点，是根据以下基本规则：
- DOM 树的 Document 节点对应的 RenderView 节点。
- DOM 树中的 Document 的子女节点，也就是 HTML 节点对应的 RenderBlock 节点。
- 显式的指定 CSS 位置的 RenderObject 节点。
- 有透明效果的 RenderObject 节点。
- 节点有溢出（Overflow）、alpha 或者反射等效果的 RenderObject 节点。
- 使用 Canvas 2D 和 3D(WebGl)技术的 RenderObject 节点。
- Video 节点对应的 RenderObject 节点。
渲染方式-绘图上下文（GraphicsContext）
RenderObject 对象是用什么来绘制内容的呢？在 WebKit 中，绘图操作被定义了一个抽象层，就是绘图上下文，所有绘图的操作都是在该上下文中来进行的。
绘图上下文可以分成两种类型：一，是 2D 图形上下文（GraphicsContext），用来绘制 2D 图形的的上下文；二是 3D 绘图上下文，是用来绘制 3D 图形的上下文。
这两种上下文都是抽象基类，它们只提供接口，因为 WebKit 需要支持不同的移植。而这两个抽象基类的具体绘制则由不同的移植提供不同的实现，每个移植使用的实际绘图类非常不一样，依赖的图形率也不一样
2D 绘图上下文的具体作用就是提供基本绘图单元的绘制接口以及设置绘图的样式。绘图接口包括``画点，画线、画图片、画多边形、画文字等，绘图样式包括颜色、线宽、字号大小、渐变```等。RenderObject 对象知道自己需要画什么样的点，什么样的图片，所以 RenderObject 对象调用绘图上下文的这些基本操作就是绘制实际的显示结果。
关于3D 绘图上下文，它的主要用处是支持 CSS3D、WebGL 等
在现有的网页中，由于 HTML5 标准引入了很多新的技术，所以同一网页中可能既需要使用 2D 绘图上下文，也需要使用 3D 绘图上下文。对于 2D 绘图上下文来说，其平台相关的实现既可以使用 CPU 来完成 2D 相关的操作，也可以使用 3D 图形接口（如 OpenGL）来完成 2D 的操作。而对于 3D 绘图上下文来说，因为性能问题，WebKit 的移植通常都是使用 3D 图形接口（如 OpenGL 或者 Direct3D 等技术）来实现
如果绘图操作使用 CPU 来完成，称之为软件绘图。如果绘图操作由 GPU 来完成，称之为 GPU 硬件加速绘图
软件渲染中网页使用的一个位图，实际上就是一块 CPU 使用的内存空间。而图中的第二和第三种方式，都是使用了合成化的渲染技术，也就是使用 GPU 硬件来加速合成这些网页层，合成的工作都是由 GPU 来做，称为硬件加速合成
渲染的基本知识：
-
首先，对于常见的 2D 绘图操作，使用 GPU 来绘图不一定比使用 CPU 绘图在性能上有优势，例如绘制文字、点、线等，原因是 CPU 的使用缓存机制有效减少了重复绘制的开销而且不需要 GPU 并行性。
-
其次，GPU 的内存资源相对 CPU 的内存资源来说比较紧张，而且网页的分层使得 GPU 的内存使用相对较多。
上一篇： 二级基础知识