In the render process
I. WebKit module
The WebKit engine creates DOM tree, Render tree, and Renderlayer tree for Web content at the same time.
The relationship between the three trees see chrome hardware Rendering
Each Render object is associated with a Renderlayer.render object and Renderlayer is a many-to-one relationship.
Renderlayer represents a layer of content on a Web page. It is because of the existence of renderlayer that the elements on the Web page can follow
The correct sequence of synthesis, so that the appropriate display of overlapping content, and translucent elements and other effects.
The conditions for triggering renderlayer creation are as follows:
1. The root node of the Web page;
2. Have explicit CSS position properties (relative,absolute,transform)
3. The element is transparent
4.overflow, Alpha mask, or reflection
5 A CSS Filter property
6. There are 2D acceleration context or 3D (WebGL) context of the canvas element corresponding to the RenderObject.
The 7.video element corresponds to the renderobject.
Renderlayercompositor is responsible for managing the synthesis of all renderlayer, and determines the layer that can be used as the composite layers.
Only Renderlayer that meet the following conditions can become a composite layer (composited layer).
31 reasons are defined in RenderLayer.h:
Compositingreason3dtransform
Compositingreasonvideo
Compositingreasoncanvas
Compositingreasonplugin
Compositingreasoniframe
Compositingreasonbackfacevisibilityhidden
Compositingreasonanimation
Compositingreasonfilters
Compositingreasonpositionfixed
Compositingreasonpositionsticky
Compositingreasonoverflowscrollingtouch
Compositingreasonblending
Compositingreasonassumedoverlap
Compositingreasonoverlap
Compositingreasonnegativezindexchildren
Compositingreasontransformwithcompositeddescendants
Compositingreasonopacitywithcompositeddescendants
Compositingreasonmaskwithcompositeddescendants
Compositingreasonreflectionwithcompositeddescendants
Compositingreasonfilterwithcompositeddescendants
Compositingreasonblendingwithcompositeddescendants
Compositingreasonclipscompositingdescendants
Compositingreasonperspective
Compositingreasonpreserve3d
Compositingreasonreflectionofcompositedparent
Compositingreasonroot
Compositingreasonlayerforclip
Compositingreasonlayerforscrollbar
Compositingreasonlayerforscrollingcontainer
Compositingreasonlayerforforeground
Compositingreasonlayerforbackground
Compositingreasonlayerformask
Renderlayer that are considered to be synthetic layers will create renderlayerbacking,renderlayerbacking
The relationship with the composited layer is one by one. Renderlayerbacking Control composited Layer
Synthetic behavior, and contains multiple graphicslayers.
Graphicslayer is an abstract representation of back-end storage. Different platforms are responsible for providing specific back-end storage classes to Graphicslayer.
The Picturelayer class for the CC module is provided for the chromium for Android platform.
is Webkit::graphicslayer to cc: The relationship between the:P Icturelayer:
When the chromium for Android hardware rendering process is fully resolved (the render process) after the process is complete,
The Web page content represented by Webkit::renderlayer tree is transferred to the CC module as a Web page Drawing command.
In a nutshell, every renderlayer contained in the Renderlayer tree is stored in the form of a drawing command.
Layertreehostimpl contains the Layertreeimpl represented by cc::P the Icturelayer tree.
Two. CC Module
1. The content of the Web page is rasterized, the process is performed on the CPU, and when finished, the Web content is stored in pixels on a sharedmemory.
This piece of sharedmemory can be used across processes. is a message sent by the render process to the browser process, created by the browser process,
The sharedmemory handle is passed back to the render process for use. This sharedmemory will also be used in the GPU process.
2. The mixing process for each layer of the Web page. After Rasterization, the sharedmemory that stores the content of the Web page is passed to the GPU as a source of texture data in the GPU process.
Implement texture Mapping (glteximage2d). Chromium is a chunked rendering strategy, and each tile managed by Tilemanager eventually corresponds to a piece of
Texture (Resourceprovider), the Web content in Sharedmemory is finally rendered to tile through glteximage2d
corresponding to the texture.
3.layertreehostimpl::calculaterenderpasses () records information about tiles that have been uploaded to the data source that need to be rendered.
Prepare for Layertreehostimpl::D rawlayers ().
4.LayerTreeHostImpl::D The actual drawing process triggered by the rawlayers (). (gldrawelements).
This process calls Glframebuffertexture2dext first, texture attach to the off-screen surface created by the render process.
Framebuffer object, and then calls gldrawelements for each tile corresponding to the texture, after this process is complete,
The Web content is rendered to the textures on attach to framebuffer, and these texture are passed on to the browser process.
Browser process
The main task of the browser process is to synthesize the texture that contains the page content in the render process to on-screen surface.
The browser process creates on-screen surface, and the Web content is eventually rendered to the back buffer of on-screen surface.
After the browser process calls Eglswapbuffer, onscreen surface corresponds to the back buffer and front buffer are swapped,
The next time the screen refreshes, the contents of the front buffer are displayed on the screen. Specific process see chromium for Android hardware rendering process full parse (browser process)