On Chrome rendering process in (on) we introduced the rendering pipeline DOM generation , style computing and layout of three stages. Today, we are concerned at the back of the rendering pipeline stage.
Stratified
After generating the layout generated by the layout of the tree, the specific location of each element of information is calculated, and then the next page is not started drawing up?
The answer is still no.
Because there are many complex page in effect, such as some complex 3D transformation, page scrolling, or make use of the z-axis z-indexing sorting. For achieving these effects more easily, rendering engine required to generate specific for a particular node layer, and generate a corresponding layer tree (LayerThree) . Mentioned layers, we should first think of PS software. PS Layers are very common, such as the picture becomes transparent background, you need to copy a layer came out, clear out unwanted portions of the layer with a plug, and then applied to the original image, you can generate a picture with a transparent background of.
To understand what is intuitively layer, through Chrome's "Developer Tools" and select "Layers" tab, you can visualize stratification page, as shown below:
If no "Layers" label, see the diagram below:
As can be seen from the above the first graph, points to the page rendering engine many layers, these layers in a certain order folded together, to form the final page.
Now that you know the browser page is actually divided into many layers, these layers superimposed synthesis after the final page. Then the relationship between these layers and layout of tree nodes is like? Please refer to the diagram:
Typically, each node in the tree contains the layout is not a layer, if a node does not correspond to the layer, then the layer subordinate to the node of the parent node . For example, the figure above the span tag will be no exclusive layers, then they are subordinate to their parent layer. In any case, a final layer of each node dependent directly or indirectly.
The browser will create a layer for individual nodes that satisfy the following conditions:
1. The context attribute element has a laminated promoted to a single layer.
Page is a two-dimensional plane, but the context allows HTML elements laminate having a three-dimensional concept, these HTML elements according to the priority attribute itself to the distribution of the z axis perpendicular to the two-dimensional plane. 
This is a schematic view of a laminated context.
Laminated context generally have the following properties:
- Document root element (html).
- postion is absolute (absolute positioning - with respect to the parent element) or relative (relative positioning) and z-index is not auto elements.
- Fixed position value (fixedly positioned - with respect to the entire document) or Sticky (viscous positioning) elements.
- flex (flexbox) child element of the container, and z-index value is not auto.
- Child element grid of the vessel, and the z-index value is not auto.
- opacity property value of less than 1 element.
- mix-blend-mode attribute value is not a normal element.
- transform / filter / perspective / clip-path / mask / mask-image / mask-border attribute value is not an element to none.
- attribute value of the element isolation isolate.
- -webkit-overflow-scrolling touch element attribute value.
- will-change value is set to any one of the attribute of the attribute is created in the context of the element laminated non-initial value.
- Contain attribute value layout, paint or a synthetic value of one of them: the element (for example contain strict / content) a.
2. The need to place cut (clip) will be created as a layer
But you first need to understand what is cut, combined with the following HTML:
<style>
div {
width: 200;
height: 200;
overflow:auto;
background: gray;
}
</style>
<body>
<div>
<p>所以元素有了层叠上下文的属性或者需要被剪裁，那么就会被提升成为单独一层，你可以参看下图：</p>
<p>从上图我们可以看到，document层上有A和B层，而B层之上又有两个图层。这些图层组织在一起也是一颗树状结构。</p>
<p>图层树是基于布局树来创建的，为了找出哪些元素需要在哪些层中，渲染引擎会遍历布局树来创建层树（Update LayerTree）。</p>
</div>
</body>
Here we define div size of 200 * 200 pixels, while the div inside the text more content, the displayed text area will certainly exceed an area of 200 * 200, this time produced a ribbon-cutting, the rendering engine will cut text div portion for displaying area, the final results as shown below:
Therefore, the laminated element with the context attributes need to be cut or, wherein any point to meet, a separate layer will be promoted.
We can also see through the Layers page we write the corresponding layer tree, to minimize the depth of the layer of the tree, to further optimize our web page code.
The layer drawing
After the completion of construction of the layer of the tree, the tree layer rendering engine will be drawn in each layer, then it is how to achieve it drawn?
Rendering rendering engine will split each layer into many small drawing instruction, and the composition of these instructions in the order of a list to be drawn, as shown below:
As can be seen from the figure, the list of drawing commands is very simple, It is allowed to perform a simple drawing operation, such as drawing a pink or black matrix lines. Drawn elements usually require a good few drawing instructions, because each element background, foreground, border and requires a separate command to draw. So layer drawing stage, the contents of the output to be drawn is that these lists.
Similarly, we can view it by clicking on the drawing instruction corresponding layer in the "Layers" in.
Rasterized
Draw list except a list of drawing instructions and the drawing order of recording, and the operation is actually drawn by the rendering engine to complete the synthesis of the thread. 
The figure above illustrates the relationship between the main rendering thread and synthetic thread. When ready to draw a list of layers, the main thread will draw the list submitted to (commit) to synthetic thread.
We talk about the concept under the viewport:
Usually a page can be very large, but the user can only see part of it, we can see the user section is called the viewport.
Users can only see through the viewport part of the page, in this case, to draw out all the contents of the layer, it would have much overhead, but it is not necessary.
For this reason, synthetic thread layer will be divided into tiles (tile) , the size of these tiles are usually 256 * 256 or 512 * 512. 
Then synthesized according to the vicinity of the thread to the priority viewport block bit map is generated, the operation is actually generated by the bit map rasterized performed. The so-called rasterization means converts the bitmap into tiles . Grid block is the smallest unit of execution. The rendering process maintains a grid of thread pool, all tile rasterization is performed in the thread pool, run mode as shown below:
In general, the rasterization process will use the GPU to accelerate the formation, using the GPU to generate bitmap the rasterizing process is called rapid or GPU rasterization, the resulting bitmap is stored in the GPU memory.
GPU operation is run on the GPU process, if the rasterized using the GPU, then the final generated bitmap operations are done in the GPU, which involves a cross-process operations.
As can be seen from the figure, the rendering process to generate a tile sending instructions to the GPU, and then perform the bitmap tiles generated in the GPU, the GPU and stored in memory.
Synthesis and display
Once all the tiles are rasterized, synthetic thread will generate a command to draw a tile - "DrawQuad", and then submit the command to the browser process.
There is a browser process called viz components, synthetic thread DrawQuad to receive commands sent over, then according to DrawQuad command, draw their page content into memory, then the final display memory on the screen.
Here, through a series of stages, write good HTML, CSS, JavaScript and other documents through the browser will show a beautiful page.
Rendering pipeline summary
After the introduction of two articles, I have a general impression of the rendering process browser bar. Let me sum up: from HTML to calculate DOM, style, layout, layer tree, drawing, rasterization, synthesis and display. As shown below:
- The rendering process HTML content into the browser can read the DOM tree structure.
- The rendering engine CSS style sheet into a browser can understand styleSheets , calculated style DOM node.
- Create a layout tree , and calculates layout information elements.
- Hierarchical tree layout, and generates a hierarchical tree .
- Generated for each layer draw list and submit it to the synthetic thread.
- Synthesis of the thread layer into tiles , and rasterization thread pool into a bitmap in the block.
- Synthetic thread sends a drawing instruction DrawQuad to the browser process.
- Browser process according to DrawQuad messages generated pages , and displayed on the monitor.
