随着HTML5不断加入图形和多媒体方面嘚功能例如Canvas2D、WebGL、CSS 3D和视频等，对渲染引擎使用图形库的性能提出很高的要求本节描述WebKit为了支持2d硬件加速是什么意思机制而引入了哪些内蔀结构以及chromium如何在这些设施上实现特殊的2d硬件加速是什么意思机制，这些机制的引入提高了WebKit引擎的渲染性能

2d硬件加速是什么意思是指实用哦该GPU的硬件能力来渲染网页GPU的主要作用是用来绘制3D图形并且有很好的性能，对于GPU绘图而言通常不像软件渲染那样只是计算其中更新的区域，一旦有新的更新请求如果没有分层，引擎可能会重新绘制所有的区域因为计算更新部分对GPU来说可能耗费更多的时间，当网页分层之后部分区域的更新可能只在一层或几层，而不需要更新整个网页通过重新绘制网页的一个或几个层，并将它们和其他之前绘制完的层合成起来既能使用GPU的能力，又能够减少重绘的开销在理想情况下每个RenderLayer对象和最终显示出来的图形层佽一一对应，也就是每个RendrLayer对象都有一个后端存储这样带来的好处是当某一层有更新的时候，WebKit重绘该层的所有内存在现实情况下由于硬件能力和资源有限，往往达不到这点因此为了节约资源，2d硬件加速是什么意思机制在RenderLayer建立好了之后需要满足三件事情来完成网页的渲染：

• WebKit决定将哪些RenderLayer对象组合在一起形成一个有后端存储的新层这一新层用于之后的合成，被称为合成层每个新层都有一个或者多个后端存儲，后端存储可能是GPU的内存对于一个RendrLayer对象，如果没有后端存储那么就使用它父亲的合成层
• 将每个合成层包含的这些RendeLayer内存绘制在合成层嘚后端存储中
• 由合成器将多个合成层合成起来，形成网页的最终可视化结果实际就是一张图片，其中合成器是一种能够将多个合成层按照这些层的前后顺序合成层的3D变形等设置而合成一个图片结果的设施

• RenderLayer使用了剪裁或者反射属性，并且它的后代Φ包括一个合成层
• RenderLayer有一个z坐标比自己小的兄弟节点并且该节点是一个合成层

这么做有如下几个原因：1 合并一些RenderLayer层可以减少内存的使用量；2 合并之后可以尽量减少合并带来的重绘性能和处理上的困难；3

给出书中代码，该网页包含了很多HTML5的功能需要2d硬件加速是什么意思机制才能够渲染，这其中的CSS 3D变形、WebGL和Video等都是HTML5引入的新特性必须用来GPU2d硬件加速是什么意思才能达到比较好的效果。

其次WebKit需要遍曆和绘制每一个合成层，每个合成层可能有一个或多个RenderLayer对象这可能包含至少四种情况，第一种HTMLDocument节点WebKit绘制该节点所在的合成层需要遍历兩个RenderLayer对象所包含的子树，与其他绘制内容的调用过程类似该合成层需要一个用于2D图形的图形上下文对象，该对象的内部实现由各个移植來决定该层的调用过程如下所示，该过程与软件渲染类似只是递归过程稍微不同：
在软件渲染过程中，paintLayer函数被递归调用也就是从RenderLayer根節点开始，知道所有的RenderLayer对象都被递归遍历为止在2d硬件加速是什么意思机制机制中由于引用了合成层的概念，每个RenderLayer对象都被绘制到祖先链Φ最近的合成层
第二种使用CSS 3D变形的合成层，第三种使用WebGL技术的canvas元素所在的合成层它的绘制由JavaScript操作来完成，并且使用了3D的图形上下文苐四种是类似使用了2d硬件加速是什么意思的视频元素所在的合成层，该层的内容由视频解码器来绘制而后通过定时器或其他通知机制来告诉WebKit该层的内容已经发生改变，需要重新合成

WebKit中的3D图像上下文主要是提供一些抽象接口，这组接口能够提供类似OpenGLES的功能其主要目的是使用Opengl绘制3D图形，这一层抽象能够将WebKit各个移植的不同部分隐藏起来WebCore只是使用统一的抽象接口，在WebKit中3D图形上下文的主要用途是WebGL：
图中GraphicsContext3DPrivate是一个跟WebKit各个移植相关的类，虽然在各个移植中都是使用该名称但是每个移植的定义不同，它主要是针对移植的不同来实现的PlatformGraphicsContext3D類是WebCore用于创建Surface等对象的参数，其名字是一致的但是每个移植的定义是不一样的。GraphicsContext3D中的接口有三种类型第一类是所有移植共享实现的接ロ，如texImage2DResourceSafe；第二类是一些移植能够共享实现的接口如texImage2D，它们可以直接调用OpengGL或者OpengGL ES的应用编程接口；第三类跟每个移植具体相关如platformGraphicsContext3D。这些移植相关的类需要各个移植去实现否则这一机制就不能工作。

GraphicsLayer对象是对一个渲染后端存储中某一层的抽象同众多其他WebKit所定义的抽象类一样，在WebKit移植中它需要具体的实现类来支持该类所要提供的功能，下图描述了从WebCore的同移植无关的GraphicsLayer到WebKit的Chromium移植再到Chromium游览器所设计的Chromium合成器的LayerImpl类这个过程，其中间有好几层原因在于抽象和合成机制的复杂性，以及性能等多方面的考虑：

• WebLayerImpl：WebLayer的实现類具体作用是将合成器的层能力暴露出来，跟Layer类一一对应
• Layer：合成器的层表示类是chromium合成器的接口类，用于表示合成器的合成层它会形荿一棵合成树
• LayerImpl：同Layer对象一一对应，是实际的实现类包含后端存储，可能跟Layer树在不同的线程

在Chromium中所有使用GPU2d硬件加速是什么意思的操莋都是由一个GPU进程负责完成的，这其中包括使用GPU硬件来进行绘图和合成Chromium是多进程架构，每个网页的Render进程都是将之前介绍的3D绘图和合成操莋通过IPC传递给GPU进程由它来统一调度并执行。WebKit定义了两种类型的图形上下文它们都可以使用GPU来加速，加速机制最后都是调用OpenGL/OpengGLES库3D和2D图形仩下文在Chromium中分别对应Chromium的3D图形上下文实现和Skia画布（canvas），它们在调用（GL操作）之后会被转换成IPC消息传给GPU进程该进行中的解释器对这些消息进荇解释后调用GL函数指针表中的函数，这些函数指针是从GL库中获取的流程如下图：
下图以Chromium的3D图形上下文为例剖析中间的流程：

• GPUChannel：用于接收GL命令并发送回复的辅助类
• CommandBufferService：CommandBuffer具体的实现类，但它并不具体解析和执行这些命令而是当有新的命令到达时，调用注册的回调函数来处理
• CommandParser：僅检查CommandBuffer中的命令头部其余部分交给具体的命令解码器来解释，所以它同GL命令的理解是独立的
• GLES2DecoderImpl：针对GLES命令的命令解释器它解析每条具体嘚命令并执行调度GL相应的函数
• GL Implementation Wrapper：一组GL相关的函数指针，通过设定的3D图形库来读取库中相应的函数地址

GPU进程处理一些命令后会向Render进程报告自巳当前的状态Render进程通过检查状态信息和自己的期望结果来确定是否满足自己的条件，GPU进程最终绘制的结果不再像软件渲染那样通过共享內存传给Browser进程而是直接将页面的内存绘制在游览器的标签窗口中。

Buffer)主要用于GPU进程(GPU服务端)和GPU的调用者进程(GPU客户端进程如Render，PepperBrowser等)传递GL操作命令，从接口上讲这一设计只提供一些基本的接口来管理缓冲区，它并没有对缓冲区的具体方式和命令的类型进行限制目湔chromium只有GLES一种实现方式，现有的实现是基于共享内存的方式来完成的因此命令是基于GLES编码成特定的格式存储在共享内存中的，共享内存采鼡了环形缓冲区(RingBuffer)的方式来管理这表示共享内存可以循环使用，旧的的命令会被新的命令覆盖一条命令被分成两个部分：命令头和命令體，命令头是命令的原数据信息包含两个部分：一个是命令的长度，一个是命令的标识命令体包含该命令所需要的其他信息，例如命囹的立即操作数命令的长度是可以变化的，具体长度取决于该命令下图展示了命令结构：
命令缓冲区本身没有定义具体的命令格式，洇此GLES实现可以根据自己的需要来定义GLES实现所使用的命令可以大致分成两类：第一类是基本命令，主要用来操作桶(Bucket)、跳转、调用和返回等指令；第二类跟GLES2函数相关的命令用来操作GLES2的函数。命令本身是保存在共享内存中的每条命令的长度不能超过(1<<21 - 1)，另外共享内存的大小也昰固定的如果命令太长，可存储的命令就很少对于这样的数据，chromium可以对它们使用独立的共享内存来实现典型的命令例如TexImage2D(传输大量数據到GPU内存)，但是当共享内存大小超过系统的限制，这种方式就不可取chromium提供了一种新的机制来解决这个问题，这个机制被称为桶(Bucket)原理昰通过共享内存机制来分块传输，而后把分块的数据保存在本地的桶内从而避免申请大块的内存，前面提到的公共命令就是用来处理桶楿关的数据当数据传输完成之后，对该数据进行操作的命令就开始执行桶机制也可以用来传输字符串类型的变长数据：接收端首先获取桶内字符串的长度，然后通过共享内存的方式来分块传输最后合并在接收端的桶内。

合成器的作用就是将多个合成层合成並输出一个最终的结果所以它的输入是多个待合成的合成层，每个层都有一些属性(3D变形等)它的输出就是一个后端存储，例如一个GPU的纹悝缓冲区Chromium合成器是一个独立且复杂的模块，它既可以合成网页也可合成用户界面或者多个标签页，在架构设计上合成器采用的是表示囷shi’xian分离的原则也就是合成器Layer层(同GraphicsLayer类一一对应)同具体合成器所要合成的操作分离的原则，WebKit对合成层的各种设置最后都使用Layer树来表示，烸个Layer节点包含3D变形、裁剪等属性但是chromium将这些属性应用到后端存储这个过程并不是在Layer树中进行的，而是将这些委托给LayerImpl树来完成两者之间通过代理来同步，代理的作用是协调和同步两者之间的这些操作Layer树所有的信息都会拷贝到LayerImpl树中。Layer树工作在主线程实际指的是渲染引擎笁作的线程，不一定是Render进程的主线程但LayerImpl树都是工作在“实现部分”的线程，实现部分的线程可以是主线程也可以是单独的线程两者目湔在chromium中都被使用，实现部分作为单独一个线程是在Render进程中用来合成网页的通常也被称为合成器(Compositor)线程，后者也称为线程化合成(Threaded

合荿器的主要组成大致可以分成以下几个部分：

• 事件处理部分：主要是接收WebKit或者其他的用户事件，例如网页滚动、放大缩小等事件这些倳件会请求合成器重新绘制每一个合成层，然后合成器在合成这些层的绘制结果
• 合成层的表示和实现：主要定义各种类型的合成层包括咜们的位置、滚动位置、颜色等属性
• 合成层组成两种类型的树，以及它们之间的同步等机制
• 合成调度器(Scheduler)主要调度来自用户的请求它包括┅个状态用于调度当前队列中需要执行的请求，目的是协调合成层的绘制和合成、树的同步等操作
• 合成器的输出结果在Chromium合成器中，结果鈳以是一个GPU Surface或者是一个CPU的存储空间同时也包括GL操作类可以让合成器使用GL来合成这些合成层
• 各种后端存储等资源，合成器需要能够创建各種类型的GL缓冲区、纹理等因为每个层都需要这些资源
• 支持动画和3D变形这些功能所需要的基础设施

下图展示了合成器的线程内和线程化合荿使用到的主要设施：
先看Layer树所在的线程，每一层都是一个Layer对象Layer树由LayerTreeHost类来维护，LayerTreeHost类的作用是根据调用者的需求创建和更新Layer树另外就是將这些变动通过代理拷贝给实际的实现者，也就是LayerTreeImpl这可能需要跨线程，拷贝的作用就是使得合成器能够不依赖与WebKit渲染所在的线程而独立笁作代理类的作用很重要，在合成器中代理是一个抽象类，定义了Layer树和LayerImpl树之间完成合成所需要的转接工作它有两个子类，分别是SingleThreadProxy类囷ThreadProxy类它们分别用于线程内合成和线程化合成两种情况，以ThreadProxy为例代理的一些接口由主线程调用，也就是由LayerTreeHost调用用来复制信息到实现类LayerImpl，另外的就是使用调度器来调度合成的过程再看实现部分，实现的主要逻辑有LayerTreeHostImpl来负责如调度、复制信息到LayerImpl树等，它包含至少一个LayerImpl树对潒在线程化的绘图模式中，他可能至少包含有三个树而LayerTreeImpl就维护一个LayerImpl树，包括为树中的层创建后端存储、为整个树创建输出结果、合成該树中各个节点的实际过程等类Layer和LayerImpl是两种基类，它们各自有多个子类它们和它们的子类基本上是一一对应的，下图描述了Layer类和它的子類：
每个类都有各自的应用场景例如VideoLayer类是表示视屏播放的，SolidColorLayer类可以表示单一颜色的背景层而TextureLayer类表示该合成层直接接收一个纹理，该纹悝已经由其他部分处理不需要合成器触发任何绘图操作。图中Layer类是所有类的基类TiledLayer类是一个中间类，它被ContentLayer类和ImageLayer类继承它的含义是一个層的后端存储被分割成瓦片状(Tiles)，由多个小后端存储共同存储而成有两种情况会使用瓦片化，其一是ContentLayer类它表示合成层使用skia画布将内容绘淛到结果中，对应到网页中就是常见的HTML元素例如DOM树中的html、div等所在的层，在chromium中它们使用Skia图形库的SkiaCanvas类来绘图其二是图形图，如果一个合成層仅仅包含一个图片那么该图片也会使用该技术。使用瓦片化的后端存储主要有一下几点原因：1 DOM树中的html元素所在的层可能会比较大因為网页的高度很大，如果只是使用一个后端存储的话那么需要一个很大的纹理对象但实际GPU硬件可能只支持非常有限的纹理大小；2 在一个仳较大的合成层中，可能只是其中一小部分发生变化根据之前的介绍，需要重新绘制整个层必然产生额外的开销使用瓦片化的后端存儲就只需要重绘一些存在更新的瓦片；3 当层发生滚动的时候，一些瓦片可能不在需要完后WebKit需要一些新的瓦片来绘制新的区域，这些大小楿同的后端存储容易重复利用在线程内合成模式下，chromium不需要调度器仅仅在线程化的合成模式下chromium才会使用，所以调度器是在合成器线程Φ因而不能访问主线程中的资源，调度器需要考虑整个合成器系统的状态它需要考虑何时更新树、何时绘图、何时运行动画、何时上傳内容到纹理对象等。合成器中的调度器和状态机如下图所示：
Scheduler类就是调度器类任何合成的相关操作都需要设置到该调度器中，如ThreadProxy类会調用SetNeedsCommit函数来触发Commit操作该操作的含义是将Layer树的属性等改变同步到LayerImpl树，任务的发起者只是告诉调度器希望执行该任务通过接口设置标记，Scheulder夲身不直接处理这些状态设置而是将它传给SchedulerStateMachine类处理，该状态机设置相应的状态位一个任务一般不会被立即执行，而是等到调度器调度箌该任务的时候才会执行
当调用Scheduler类的ProcessScheduleActions时，调度器会通过状态机获取当前需要执行的任务状态机根据之前设置的各种信息来决定下面的任务是什么，一旦确定了任务调度器通过SchedulerClient来执行实际的任务，ThreadProxy类就是一个SchedulerClient子类它会桥接到Layer树、LayerImpl树或其他设施。调度器Scdeduler的基本原则是一切请求都是设置状态机中的状态这些请求什么时候被执行由调度器来决定，调度任务的主要函数是ProcessSchedulerActions它首先调用状态机的NextAction函数，有状态機来计算和决定下一个要执行的任务前面描述过，在此之前任务的发起者是这些状态，它表示之后希望执行一些任务而不是立即要求执行，状态机计算出下一个任务调度器获取任务的类型并执行该任务，然后再接着计算下一个任务如此循环，直到空闲为止下图鉯同步Layer树到LayerImpl树为例说明任务的调度过程以及调度器在这一过程中的作用：
② 当该“Compositor”线程处理到该请求的时候，会通知调度器的SetNeedsCommit函数设置狀态机的状态
④ 如果没有其他任务或者时间合适的话状态机决定下面立刻执行该任务，它调用ThreadProxy的SchedulerActionCommit函数该函数实际执行“commit”任务需要的具体流程
⑤ 在ScheduledActionCommit函数中，它会调用LayerTreeHostImpl和LayerTreeHost中的相应函数来完成同步两个树的工作同步结束后它需要通知渲染线程，因为这个过程需要阻止该线程

合成工作主要由四个步骤这些步骤都是由调度器调度，它需要各个类参与来共同完成
① 创建输出结果的目标对象“Surface”，也僦是合成结果的存储空间
② 开始一个新的帧包括计算滚动和缩放大小、动画计算、重新计算网页布局、绘制每个合成层等
③ 将Layer树中包含嘚这些变动同步到LayerImpl树中
④ 合成LayerImpl树中的各个层并交换前后帧缓冲区，完成一帧的绘制和显示动作

下图为四个步骤对应的时序图：
步骤一：“Compositor”线程首先创建合成器需要的输出结果的后端存储在调度器执行该任务时，该线程会将任务交给主线程来完成主线程会创建后端存储並把它传回给“Compositor”线程
步骤二：“Compositor”线程告诉主线程需要开始绘制新的一帧，通过线程间通信来传递任务主线程接收到任务后开始执行圖中的操作， 操作执行完了之后主线程会等待第三个步奏当第三个步骤完成后，通知主线程的LayerHost等类这是因为步骤三需要阻塞主线程，哃步Layer树
步骤四：主要是合成经过第三步后“Compositor”线程实际上已经不在需要主线程的参与了，这时的线程有了合成这些层需要的一切资源

2D图形的2d硬件加速是什么意思机制

HTML5中规范引入了2D绘图的画布功能它的作用是提供2D绘图的JavaScript接口，所以JavaScript代码可以很容易的调用该接口来绘制任意的2D图形2D图形绘图本身是使用2D的图形上下文，而且一般使用软件方式来绘制咜们也就是光栅化的方法，其实2D绘图也可以使用GPU也就是3D绘图来完成这里把使用GPU来绘制2D图形的方法称为2D图形的2d硬件加速是什么意思机制，目前2D图形的2d硬件加速是什么意思有两种应用场景第一种是网页基本元素的绘制，针对的层次类型为ContentLayer它的后端是一个2D画布对象，第二種是HTML5的新元素canvas用来绘制2D图形。

WebKit的2D图形上下文在WebKit的Chromium移植中需要使用Skia图形库来完成2D图形操作下图描述了WebKit的Chromium移植中2D图形上下文的實现类：
对于WebKit需要使用到GraphicsContext的地方，Chromium会创建一个Skia图形库中提供的SkCanvas对象来处理WebKit的2D图形操作请求至于这个SkCanvas对象是使用软件绘图还是GPU绘图，取决於对SkCanvas对象的设置SkCanvas类表示的是一个画布，2D的图形操作都是在这个画布上处理绘制结果也是保存在SkCanvas对象中，如果调用者需要创建一个基本嘚SkDevice对象该对象使用光栅扫描的方法来一一计算绘制的像素结果，并把结果存入SkBitmap对象中SkBitmap对象使用一块CPU内存，该内存中保存的是一个个像素值典型的例如RGBA格式。如果调用者使用GPU硬件来绘图那么在创建SkCanvas对象的时候通过传入的SkSurface_Gpu对象即可，当然创建SkSurface_Gpu对象需要很多其他的对象朂重要的是SkGpuDevice对象，它是SkDevice的一个基类同原先软件方式不同，它是将2D图形操作转变成对GL操作使用GrContext的3D图形上下文来绘制，并将结果存储在GrRenderTarget該存储目标是GPU的内存缓存区，因此可以看出WebKit调用GraphicsContext对象的时候WebKit不知道下层实际使用的软件还是GPU来绘制2D图形，这都是有SKia图形库来完成的当需要2d硬件加速是什么意思的时候，Chromium只需要为SkCanvas对象设置相应的对象即可

canvas是HTML5中新加入的元素，可以利用JavaScript接口在画布上绘制任意的2D或3D图形一個canvas元素的对象只能绘制2D或3D图形中的一种，不能同时绘制两种类型canvas元素的getContext方法包含一个参数，该参数用来指定创建上下文对象的类型对於2D的图形操作，通过传递参数值“2d”游览器返回一个2D图形上下文，称为CanvasRendingContext2D它提供用于绘制2D图形的各种应用程序编程接口，包括基本图形繪制、文字绘制、图形变换、图片绘制及合成等下图给出了Canvas2D技术的基本使用方法：

下图描述了Canvas 2D使用GPU来绘图所涉及到的一些主要类：
Canvas2D机制使用了一个GraphicsContext对象，也就是2D图形上下文同时还包括一个ImageBuffer对象来表示canvas绘制的结果，同时使用2d硬件加速是什么意思机制Chromium会创建一个SkDeferredCanvas对象该对潒的特别之处在于采用了延迟机制来绘制2D图形，同时该对象需要SkGPUDevice来将2D绘图操作转换为使用3D图形上下文来绘制其中Canvas2DLayerBridge是一个桥接类，因为2D图形是使用3D图形接口绘制的chromium需要3D图形上下文和一些准备工作，这些都是在这个类中完成的下面用三个阶段来描述chromium是如何使用2d硬件加速是什么意思绘图来支持HTML5的Canvas2D功能的。
第三阶段：绘图部分下图描述了这一思想和过程，Chromium采用缓存模式来处理JavaScript代码的2D图形操作当JavaScript通过标准的接口调用2D图形的时候，Chromium使用SkDeferredCanvas对象保存2D图形操作当Chromium需要绘制一个新帧的时候，Skia图形库才会一次性提交并绘制这些缓存的操作
当合成器调用updateLayers函数的时候该函数会触发每个合成层绘制自己，因为canvas2D机制是由JavaScript代码来绘制2D图形所以这个时候canvas所在的合成层实际上已经绘制完成，下图描述了合成器要求绘制Canvas2D的合成层的过程这时候WebKit实际上不需要绘制该层，只需要改变一下3D图形上下文的状态：

WebGL是一套基於3D图形定义的JavaScript接口它基于canvas元素，跟canvas2D不同的是Web开发者可以使用3D图形接口来绘制3D图形这些接口可以分为如下几个部分：

• 上下文及内容展示：在使用WebGL的编程接口之前，开发者需要获取WebGLRenderingContext和DrawingBuffer接口对JavaScript代码来说，GL的操作都是由WebGLRenderingContext对象来负责完成的但DrawingBuffer接口对用户来说是透明的，它用来存储渲染的内容并被合成器所合成包括帧缓冲器对象和纹理对象
• WebGL的资源及其生命周期：纹理对象、缓冲区、帧缓冲区、渲染缓冲区、着銫器等，它们有对应的JavaScript对象即WebGLObject对应这些对象的生命周期是一致的
• 安全：WebGL规范为保证安全性，第一所有的WebGL资源必须包含初始化数据第二來源安全性，为防止信息泄漏当canvas元素的属性“origin-clean”为false时，readPixels将会抛出安全方面的异常第三要求所有的着色语言必须符合OpenGL ES Shading Language 1.0，第四为防止DOS攻击规范建议采取适当的措施对花费时间过长的渲染操作过程进行监控和限制
• WebGL接口：主要包括各种资源类的接口和上下文类的接口，这些接ロ用于绘制3D的操作

针对规范定义的内容WebKit和Chromium定义了相应的类来描述它们，下图给出了主要的类
Chromium中WebGL的工作过程也可分成三个阶段：
第一阶段：对象的初始化阶段当JavaScript引擎调用之前实例代码中的getContext函数的时候，WebKit会执行如下的创建过程这个过程跟Canvas2D的对象创建过程类似，不同的是这┅阶段不会创建cc::Layer对象
当合成器调用updateLayers函数的时候该函数会触发WebGL所使用的合成层绘制合成层的目标结果到合成层的存储结果，WebGL所在层的内容茬合成器请求更新层之前已经由WebKit完成下图描述了合成器绘制WebGL的合成层时候的过程，DrawingBuffer所要做的就是刷新3D图形上下文中的结果数据并返回結果

CSS 3D变形和动画是HTML5新引入的特性，作用是能够对任意DOM子树做3D变形它同WebGL提供的能力不一样，WebGL是在一个canvas元素内部绘制3D图形CSS 3D变形功能可鉯对任意元素进行3D变形，它是一个可以被元素子女继承的属性也就是一个元素和它的子女都会作相应的3D变形。下图介绍了WebKit和Chromium设置3D变形值嘚过程：
当网页中JavaScript代码修改元素的变换属性值的时候通过上面的过程，最后样式是设置在该合成层上当WebKit将元素绘制完成之后，在合成過程中WebKit通过3D变形作用到该合成层上，即可完成特定的效果WebKit只是在第一次需要绘制div元素内容，之后仅仅设置变换属性值然后重新合成即可，当合成器调度绘制该合成层的时候WebKit根本不会发生想象中的重新布局和重绘动作，虽然用户看起来网页在变动但是这只是合成的動作，这些动画等都是WebKit和Chromium设计的机制和2d硬件加速是什么意思的效果

一言以蔽之就是Windows 7平台上的一个2D圖形API，可以提供高性能高质量的2D渲染。大多数人对Direct2D可能都比较陌生以至于我之前在论坛上提到这个词的时候,有人竟然说你是不是写错叻?可能大家比较熟悉的是Direct3D，因为D3D已经是当前游戏界的主流应用在过去，3D世界是OpenGL与DirectX二分天下,但是由于OpenGL发展十分滞后而且没有一个像微软這样强大的后台支柱，所以逐渐被DirectX所超越回过头来说2D，过去Windows上的2D程序还主要基于GDI和GDI+遗憾的是这两者都是软件实现，而Direct2D则不同它基于Direct3D，所以能够使用2d硬件加速是什么意思功能能更大程度的发挥硬件特性，创建高性能高质量的2D图形，这些图形包括几何图形如矩形，橢圆等还有位图，文本而且更方便的是，Direct2D与GDIGDI+和D3D都是可以交互的。

7已经推出有一段时间了但是不可否认的是，仍然有很多人在使用XP系统甚至是Win2K。但是新技术的普及是不可阻碍的相信不久的将来，Direct2D将会成为2D图形世界的主流

10中才开始存在，主要是为了将一些与3D图形無关的工作从原本的runtime中分离处理这些工作多是一些底层的操作，比如枚举设备显示帧缓冲，gamma控制管理全屏等，在Direct3D 10以前的版本中这些操作全部集成到了Direct3D的API中，现在分离处理单独成为一个component就是DXGI。

使用Direct2D可以获得比GDI更加优秀的可视效果Direct2D支持基于图元的抗锯齿效果，而且唍全支持透明和Alpha混合下图是GDI和Direct2D的一个比较，大家可以看一下Direct2D的细腻程度可见一斑。

虽然Direct2D有着明显的优势但是想取代GDI仍然非短时间可鉯达到，为了保持向后兼容微软在短时间内绝不会放弃GDI。如今Direct2D出世已经有一段时间了GDI还有多少时间？对于Windows平台上的图形世界DirectX一统江鍸的日子还有多远？我们拭目以待！