CSS Reflow and redraw

Before you introduce the browser reflow and redraw, let's look at how the browser works once we understand how the browser works, we can better navigate it.
Modern browsers typically have two important threads of execution, and these two threads work together to render the page: the main thread

Typically, the main thread is primarily responsible for running JavaScript, calculating CSS styles for HTML elements, layout pages, drawing page elements into one or more bitmaps, and handing these bitmaps to the typeset thread- typesetting thread

Typically, a typographic thread is primarily responsible for rendering a bitmap over the GPU and displaying it on the screen, updating the visible part of the bitmap to the main thread request, or the part that will be visible, judging the part that the current page is visible, and judging the part that will be visible by scrolling through the page. As the user scrolls through the page to move these parts (visible part and soon visible part) of the GPU

The typesetting thread draws the bitmap onto the screen through the GPU.
The GPU is good at drawing bitmaps to the screen, repeating the same bitmap, drawing the same bitmap in different positions, at different angles of rotation, or zooming in a different scale.
The GPU is relatively slow: load the bitmap into video memory. Rearrange and redraw

After the browser has downloaded all the components in the page--html tags, JavaScript, CSS, and images will parse the resulting two internal data structures--dom tree and render tree.
The DOM tree represents the page structure, and the render tree represents how the DOM nodes are displayed. Each node in the DOM tree that needs to be displayed has at least one corresponding node in the rendered tree (the hidden DOM element has a disply value of none in the render trees without corresponding nodes). The nodes in the render tree are called "frames" or "boxes" that conform to the definition of the CSS model and understand the page elements as a box with padding, margins, borders, and positions. Once the DOM and render tree are built, the browser begins to display (draw) the page elements.
when DOM changes affect the geometry of the element (wide or high), the browser needs to recalculate the geometry of the element, and the geometry properties and position of the other elements are affected as well. The browser invalidates the affected portions of the render tree and reconstructs the render tree. This process is called reflow. When the reflow is complete, the browser redraws the affected section to the screen, which is called redrawing.
Tips: Not all DOM changes affect geometric properties, such as changing the background color of an element without affecting the width and height of the element, in which case only repainting occurs. causes the rearrangement to happen

Obviously, each rearrangement will inevitably lead to repainting, and in which case the rearrangement will occur. Add or remove visible DOM element element position change element size change element content change (for example: one text is replaced by another different size picture) page rendering initialization (unavoidable) browser window size change

These are obvious, perhaps you have had this experience, constantly changing the size of the browser window, causing the UI unresponsive (some of the lower version ie even directly hanging off), now you may suddenly realize, yes, it is again and again the reflow redraw caused. transition

Having learned about reflow and redrawing, let's now look at how the main thread of the browser and the layout thread work together to complete a CSS transition.
Let's say we want to convert the height value of an element from 100px to 200px, as follows:

div {   
    height:100px;   
    Transition:height 1s linear;   
}   

div:hover {   
    height:200px;   

The main thread and the layout thread will complete this transition according to the sequence diagram shown in the image below. Note: The action in the Orange Box is a potentially time-consuming operation, and the action in the blue box is a faster operation.

As you can see, the whole process has a lot of orange squares, which means that the browser has a pretty heavy workload to deal with, which means that the transition may appear in Dayton.
In every frame of the transition, the browser is going to re-layout, draw the page, and load the most recent bitmap object onto the GPU. As we know before, loading a bitmap object into the GPU's memory is a relatively slow operation.
The reason why the browser has to handle such heavy work on every frame of animation is that the content of this element is constantly changing. Modifying the height of an element may cause its child elements to be resized accordingly, so the browser must be re-layout. After the layout is re-laid, the main thread must regenerate the bitmap object for that element. Transition:transform

This shows that the height of the transition relatively poor performance, there are some performance better transition.
Suppose we want to scale an element from half size to actual size, and assume that we use the CSS's Transform property to scale it, while using the CSS's transition property to generate a scaled animation effect, as shown here:

div {   
    Transform:scale (0.5);   
    Transition:transform 1s linear;   
}   

Div:hover {   
    Transform:scale (1.0);   
}  

We see that there are only a few orange squares, which means that the animation effect can be very smooth. So, what is the difference between an transform animation effect of an element and its highly animated effect?
By definition, the Transform property of a CSS does not change the layout of the element, nor does it affect the elements surrounding it. It treats elements as a whole-scaling the entire element, rotating the entire element, or moving the entire element.
This is good news for the browser. The browser simply generates the bitmap object for this element at the beginning of the animation and passes it to the GPU. After this, the browser does not need to do any re-layout, drawing the page and the operation of the bitmap object, instead, the browser can take advantage of the GPU excels at drawing features to quickly rotate or scale the same bitmap object in different locations. Design Decisions

So, does that mean that we don't have to ease the height of an element. Not also, in some cases, this is part of your design effect, and the animation effect can be done very quickly. Perhaps the elements of the animation are isolated and do not cause the other parts of the page to be re-laid, perhaps the element is simply redrawn, the browser can be done quickly, and perhaps the element is small, and the browser simply passes a small bitmap object to the GPU.
Of course, without affecting the visual effects of your design, it is best to slow down a better-performing CSS property, such as transform, rather than easing a poorly performing CSS property, such as height. For example, suppose you have a button in your design that will come up with a menu when you click it and try to move the Transform property of the menu to show it instead of easing its top or height properties to achieve a similar effect.
Particularly fast CSS properties on animations include: CSS transform CSS opacity CSS Filter summary

Reflow and Redraw is one of the main causes of energy consumption in DOM programming, and it is important to refer to the following points when it comes to DOM programming: Try not to make queries when layout information changes (which will cause the render queue to be forced to refresh) Multiple property changes in the same DOM can be written together (reducing DOM access, At the same time, the risk of forced rendering queue refresh is reduced to 0) if you want to add the DOM in bulk, you can leave the element out of the flow of the document, and then bring it into the flow of the document, so that only a single reflow (application of the fragment element) will be required to rearrange the elements more than once. The Position property is set to absolute or fixed so that this element is detached from the document flow, and its changes do not affect other elements. For example, an animated element is best set to absolute positioning. references http://developer.51cto.com/art/201508/488053.htm http://www.jb51.net/css/348357.html