blink渲染知识（一）

http://dev.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

4大trees:

TheDOM tree, whichis our fundamental retained model

TheRenderObject tree,which has a 1:1mapping to the DOM tree’s visible nodes.RenderObjects know how topaint their corresponding DOM nodes.

TheRenderLayer tree, madeup of RenderLayers that map to a RenderObject on the RenderObjecttree. The mapping is many-to-one, as each RenderObject is eitherassociated with its own RenderLayer or the RenderLayer of its firstancestor that has one. The RenderLayer tree preserves z-orderingamongst layers.

TheGraphicsLayer tree,mapping GraphicsLayers one-to-many RenderLayers.

Graphicslayer tree中每个graphiclayer 对应1或多个renderlayer.Graphiclayer有backingstore.

Compositor:

用来管理graphicslayertrees, 以及负责frame的liftcycle.代码在src/cc下。

compositor把layer内容composit到一起，叫做drawing.

各个layer产生自己的内容，叫做painting.如果是paint到bitmap上，就用softwarerasterization. 如果是paint到texture上就用hardwarerasterization, 意思是paint操作也有软硬之分。

先painting,再drawing.

当browser需要一个frame时，compositor执行draw操作（也就是composite操作），就可以了。

Every time the browser needs to make a new frame, the compositordraws. Note this (confusing) terminology distinction: drawing is thecompositor combining layers into the final screen image; whilepainting is the population of layers’ backings (bitmaps withsoftware rasterization; textures in hardware rasterization).

硬件加速的compositor模式下，compositor运行于一个独立的线程，他的输入是graphicslayer(composing layer)以及skpicture(从renderlayerpaint到skcanvas中的中间结果，可以认为是一些displaylist, 一些命令)。他要发送opengl命令给GPU线程。让gpu完成图像的合成等操作。Graphicslayers通过一些实现了Web*Layers接口的平台相关的Web*Layers来表现他的内容.这些也是compositor的输入。也叫做compostorlayer, cc layer. Graphic layer有backingsurface用于存储bitmap. Graphic layer的backingsurface和SkPIcture的关系？

所以render线程，处理renderlayer tree,

compositor 线程也叫做impl线程。

compositor线程有一份renderlayer tree copy,以及graphicslayer tree, 以及skpictures,从而他工作起来减少了对mainthread的依赖.并向gpu线程发送命令.

Render线程里的有LayerTreeHost,而compositor线程有一份copy叫做LayerTreeHostImpl,

The two layer trees are kept synchronized by a series of messagesknown as the commit, mediated by the compositor’s scheduler (incc/trees/thread_proxy.cc).The commit transfers the main thread’s state of the world to thecompositor thread (including an updated layer tree, any new SkPicturerecordings, etc), blocking the main thread so this synchronizationcan occur. It’s the final step during which the main thread isinvolved in production of a particular frame.

Mainthread向compositorthread同步layerTree和SkPicture数据。这叫做commit.由scheduler完成。

gpu线程完和硬件打交道。

没有硬件compositor的模式下，各个render把绘制完成的各自的内容bitmap发送给brower,browser把它们composting到一起。有了hardwarecompositor之后，就可以有一个gpuprocess专门负责和gpu打交道完成这些硬件的compostor工作。

Compositor应该位于renderprocess, 所以compositor线程和gpu线程应该不是一个。最开始，compositor在mainthread, 后来挪出来成为一个独立thread.再后来，又增加了工作量（impl-sidepainting）

Renderer process里面的所有gpu操作都通过commandbuffer发送给gpu进程。Gpu进程解析执行。

在android里有这三个线程么：compositor线程？render主线程？还有gpu线程？抑或压根没有gpu线程。是的，三个线程。

Compositor操作就是要产生最终的图形。

Compositor使用GLEs的api调用图形操作，但这写操作可能并不是直接操作图形，可能被转换成commands发给gpuprocess. 或者gpu线程。

render主线程的处理到了renderlayertree生成就截至了。

一些renderlayer还需要和graphicslayer关联，也就是compositinglayer关联，并且需要raster到graphicslayer的后端存储里，这叫rasterization。这个操作可以是软件，硬件完成。如果有gpu应该硬件，效率高。他们会在一些独立的workerthread里去完成。所以不是renderthread, compositor thread,也不是gputhread.

render要先paint其renderlayer到SkPicture里，然后raster线程会从skPicture里拿到displaylist,调用gpu去完成真正的raster.

Renderthread paint的结果skpicture交给compositorthread的过程叫做commit.

graphicslayer的内容被raster后，剩下就是compositorthread的任务了,compositorthread把这些各个compositorlayer的已经有的图像内容合成到一起，这些操作是靠gl命令命令完成，所以他把gl命令发送给gpu线程去执行。gpu完成真正的合成。并且直接画到屏幕上的。

下面看看：

http://dev.chromium.org/developers/design-documents/compositor-thread-architecture

LayerTreeHost和LayerTreeHostImpl分别是mainthread和renderthread维护的layertree.

因为compositior可以和renderthread在一个线程，也可以是独立线程，不管哪种，为了对上层提供较为统一的抽象接口，引入了threadProxy和singleThreadProxy,前者使用于compositor在独立线程的模式，后者使用于compositor和render在一个线程的模式。

网上的ppt:

chromiumrending pipeline:

http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline

chrome渲染的过程：

http://blog.csdn.net/jaylinzhou/article/details/18313505

chromium软件渲染：

http://blog.csdn.net/milado_nju/article/details/7455348

ChromiumGraphics: Android L平台上WebView的变化及其对浏览器厂商的影响分析

http://blog.csdn.net/hongbomin/article/details/40799167?utm_source=tuicool

Chromiumon Android: 分析ChromiumWebView的软件渲染方式：

http://blog.csdn.net/hongbomin/article/details/17931223

基于chromium内核的webview实现：

http://blog.csdn.net/hongbomin/article/details/17931377