浏览器的WebKit内核
- 先解析dom构建DOM Tree
- 解析css 生成CSS规则树
- 浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree(Rendering Tree渲染树并不等同于DOM树，display为none不会在渲染树上)
- Rendering Tree 上每个节点都是一个renderObject
从根节点开始遍历 Rendering Tree 构建RenderLayer
- 以下会触发新的RenderLaryer
- DOM 树的 document 节点对应的 RenderView 节点
- DOM 树中 document 的子女节点，即 html 节点对应的 RenderBlock 节点
- 显示指定 CSS 位置的 RendrObject 节点
- 有透明效果的 RenderObject 节点
- 节点有溢出（overflow）、alpha 或者反射等效果的 RenderObject 节点
- 适用 canvas 2d 或者 3d（WebGL）技术的 RenderObject 节点
- video 节点对应的 RenderObject 节点
RenderLayer 节点和 RenderObject 节点不是一一对应的，而是一对多的关系
由cpu或者gpu绘制每个RenderLayer
- 软件渲染和硬件加速渲染
- 2d或者3d都有自己的context对象，处理不同的api(绘制点，线的api)
- cpu计算绘制的叫软件渲染，gpu计算绘制的叫硬件加速绘图(cpu擅长复杂计算，gpu擅长简单重复计算)
- 位图： 一组二维数组，数组的每一项记录一个点的色值
- 纹理： GPU中的位图 用3个自己存256位rgb值，宽度高度有大小限制
- 光栅化： 本质是坐标变换、几何离散化，然后再填充
为了节省硬件消耗
webkit决定将那些RenderLayer对象组合在一起，形成一个由后端(一般指 GPU 内存)存储的新层，即合成层
合成层是合并多个RenderLayer为一个对象，减少存储空间，提升渲染效率
- 对于一个 RenderLayer 对象来说，如果它没有后端存储的新层，那么就使用其父亲所使用的合成层
- 将每个合成层包含的 RenderLayer 内容绘制在其后端存储中，这里的绘制可以是软件绘制，也可以是硬件加速绘制
- RenderLayer如果需要后端存储，会创建一个RenderLayerBacking对
- GraphicsLayer类用来管理存储空间，拥有GraphicsContext，用于为该GraphicsLayer 开辟一段位图
- 由合成器将多个合成层合成起来，形成网页的最终可视化结果（实际就是一张图片）
- 重排和重绘触发renderLayer对应的合成层的对象的改变
所有的分层都是逻辑上的分层，为了减少cpu/gpu计算，显示只有一层
浏览器不能直接改变屏幕像素输出， 通过GUI Toolkit来输出
- 浏览器会将一个要显示的网页包装成一个 UI 组件，通常叫做 WebView
- webview默认没有独立的位图缓存，滑动损耗巨大(即使改变1px, 当前视口全部绘制)
- webview绘制分为两步
- 1根据需要更新内部缓存，将网页内容绘制到内部缓存里面 (绘制（Paint）或者光栅化（Rasterization），它将一些绘图指令转换成真正的像素颜色值)
- 2将内部缓存拷贝到窗口缓存上 (它负责缓存的拷贝，同时还可能包括位移（Translation），缩放（Scale），旋转（Rotation），Alpha 混合等操作)
所谓优化，加速，其实就是通过缓存，硬件，逻辑减少cpu的计算。
