The first six tortured soul: Talk about your understanding of redraw and reflux

We first look at 渲染流水线the process:

 

 

Next, we introduce the future as a basis to redraw and return, and let another way to update the view - synthesis.

Reflux

First introduced 回流. 回流Also called 重排.

Triggering conditions

Simply put, when we initiated DOM geometry changes to modify the DOM structure will occur 回流process.

Specific point, the following actions may trigger reflux:

1. Geometric properties of a DOM element of change, common geometric attributes width, height, padding, margin, left, top, borderand so on, this is well understood.

2. DOM node occurs so 增减or 移动.

3. Write offsetfamily, scrollgroup, and clientwhen the group attribute, a browser in order to obtain these values, the need for reflow operation.

4. Call window.getComputedStylemethod.

Reflow process

In accordance with the above rendering pipeline, triggered when returning, if DOM structure changes, the re-render the DOM tree, and then later process (including tasks outside the main thread) all go again.

 

 

Equivalent to parse and process re-synthesis and went one, the cost is very large.

Redraw

Triggering conditions

When DOM changes resulted in a change in style, and does not affect the geometric properties of time, it will lead to 重绘( repaint).

Redraw process

Since there is no change in DOM geometric properties of lead, and therefore no need to update the location information element, thus eliminating layout process. Process is as follows:

 

 

Skipped 生成布局树and 建图层树the stage, directly generate a list of drawing and continued block, behind a series of operations to generate a bitmap.

It can be seen redraw not necessarily lead to reflux, but some reflux occurred redrawn.

synthesis

In another case, a direct synthesis. Such as the use of CSS3 transform, opacity, filterthese properties can be achieved synthesis of the results, that is, we often say that GPU acceleration .

The reason GPU acceleration

In the case of the synthesis, and may skip the layout drawing process, directly into the 非主线程part of the process, i.e., directly to the 合成线程process. Referred to it has two advantages:

1. We can give full play to GPUadvantages. Synthesis process thread resulting bitmap will call the thread pool, and wherein GPUfor generating acceleration, while the GPU is good at handling bitmap data.

2. Do not consume resources of the main thread, the main thread stuck even though the effect is still able to smoothly display.

Practical significance

Once you know the principle of the above, what significance does to the development process?

1. Avoid frequent use of style, instead of using the modified classapproach.
2. Use createDocumentFragmentbatch DOM manipulation.
3. For resize, scroll, etc. Stabilizer / throttling process.
4. Add will-change: tranform, so that its rendering engine to achieve a single layer, when these transformations take place, just using synthetic thread to handle these transformations, and not involve the main thread, greatly improve the rendering efficiency. Of course, this change is not limited to tranform, any synthetic effects can be achieved with CSS properties can be will-changedeclared. Here's a practical example, a line will-change: tranformto save a project, click Direct .