css layer

When rendering a page, the browser will divide the page into many layers, ranging from large to small, with one or more nodes on each layer.
When rendering DOM, what the browser does is actually:

1. After obtaining DOM, it is divided into multiple layers

2. Calculate style results for nodes of each layer (calculate style – style recalculation)

3. Generate graphics and locations for each node (Layout – Layout, rearrangement, reflow)

4. Fill each node into the layer bitmap (Paint – redraw)

5. Upload layers to GPU as textures

6. Combine multiple layers on the page to generate the final screen image (Composite Layers – layer reorganization)

Conditions for layer creation

Chrome browser creates layers when any of the following conditions are met:

1. Have CSS attributes with 3D transformation

2. Nodes using accelerated video decoding

3. Node

4. CSS3 animation node

5. Elements with CSS acceleration attributes (will change)

Repaint

Redrawing is the browser behavior triggered by the change of the appearance of an element, such as changing the attributes such as outline and background color. The browser will redraw according to the new attributes of the element,
Give the element a new look. Redrawing does not lead to re layout, so it does not necessarily accompany rearrangement.

It should be noted that the redrawing and rearrangement are based on the layer. If an element in the layer needs to be redrawn, the whole layer needs to be redrawn.
So in order to improve performance, we should make these "changed things" have their own layer,
Fortunately, most browsers automatically create layers for CSS3 animation nodes.

Rearrangement (Reflow, also known as Reflow)

Rendered objects do not contain location and size information when they are created and added to the render tree. The process of calculating these values is called layout or rearrangement (reflow).

"Repaint "Not necessarily"rearrangement"，For example, changing the color of a web page element will only trigger"Repaint "，Will not trigger"rearrangement"，Because the layout has not changed.
"rearrangement"In most cases, it will lead to"Repaint "，For example, changing the position of a web page element will trigger at the same time"rearrangement"and"Repaint "，Because the layout has changed.

Properties that trigger redrawing

• color * background * outline-color
• border-style * background-image * outline
• border-radius * background-position * outline-style
• visibility * background-repeat * outline-width
• text-decoration * background-size * box-shadow

Properties that trigger rearrangement (reflow)

• width * top * text-align
• height * bottom * overflow-y
• padding * left * font-weight
• margin * right * overflow
• display * position * font-family
• border-width * float * line-height
• border * clear * vertival-align
• min-height * white-space

Common actions to trigger rearrangement

The cost of reflow is much higher than that of repaint.
The Reflow of a node is likely to lead to the Reflow of child nodes, even parent nodes and peer nodes.
On some high-performance computers, it may not matter, but if Reflow occurs on mobile phones, the process is very painful and power consuming.

Therefore, the following actions are likely to be costly.
	When you add, delete and modify DOM When the node is, it will cause Reflow , Repaint. 
	When you move DOM Location of
	When you modify CSS Style.
	When you Resize There is no problem when the window is moved, because the zoom of the moving end does not affect the layout viewport)
	When you change the default font of a web page.
	[When getting some properties(width,height...)!!!!!]
	Note: display:none Will trigger reflow，and visibility:hidden Will only trigger repaint，Because there is no position change.

Optimization scheme (redraw and rearrange)

We know that the browser experiences the following "meticulous" steps when rendering pages:

	1. Calculate the style results that need to be loaded on the node( Recalculate style--Style (recalculation)
	2. Generate graphics and locations for each node( Layout--Rearrangement or reflux)
    		3. Fill each node into the layer( Paint--(redraw)
        		4. Combine layers on page( Composite Layers--Layer reorganization)
   If we need to improve performance, what we need to do is to reduce the work that the browser needs to do at runtime, that is, try to reduce 1234 steps.

[The specific optimization scheme is as follows]:
1.Try to use it when changing the position of elements CSS3 of transform Instead of right top left Etc
	Transformation( transform)And transparency( opacity)The change of only affects the combination of layers
2.[use opacity To replace visibility]
    (1).use visibility Rearrangement is not triggered, but redrawing is still performed.
    (2).Direct use opacity It triggers redrawing and rearrangement( GPU The underlying design is like this!).
    (3).opacity Used with layers, neither redrawing nor rearrangement is triggered.
        reason:
		When transparency changes, GPU In painting, it is only a simple reduction of the texture that has been painted before alpha Value to achieve the effect without overall redrawing.
		But the premise is that this is modified opacity Itself must be a layer.
3.[Do not use table Layout]
	table-cell
4.Merge multiple operations of changing style attributes into one operation
	Don't modify one by one DOM Predefined style class，Then modify DOM of className
5.[take DOM Modify offline]
	because display Attribute is none The element of is not in the rendering tree, and the operation on the hidden element will not cause the rearrangement of other elements.
	If you want to perform complex operations on an element, you can hide it first and display it after the operation is completed. In this way, only 2 rearrangements are triggered during hiding and display.
6.[Using document fragments](documentFragment)------vue This method is used to improve performance.
7.[Don't get some DOM Attribute values of nodes are placed in a loop as loop variables]
	When you request something from the browser style When information, it will let the browser flush Queue, such as:
		1. offsetTop, offsetLeft, offsetWidth, offsetHeight
		2. scrollTop/Left/Width/Height
		3. clientTop/Left/Width/Height
		4. width,height
    When you request some of the above properties, the browser needs to refresh the internal queue in order to give you the most accurate value,
    Because there may be operations in the queue that affect these values. Even if you get the layout and style information of elements, it has nothing to do with the layout information that has recently occurred or changed,
    The browser will forcibly refresh the rendering queue.
8.During animation implementation, enable GPU hardware speedup:transform: tranlateZ(0)
9.Create a new layer for animation elements,Improve the of animation elements z-index
10.When writing animation, try to use the following API:

requestAnimationFrame ---- request animation frame

1. window.requestAnimationFrame() 
	** Different from the timer: the timer needs to specify the time, and requestAnimationFrame According to the refresh rate of the display, there is no need to specify the time.
    Description: this method tells the browser to invoke the function you specified before the next redraw.
    1. Parameter: this method uses a callback function as a parameter, and the callback function will be called before the browser redraws the next time. 
            The callback function will be automatically passed in a parameter, DOMHighResTimeStamp，identification requestAnimationFrame()The current time when the callback function started to trigger

    2. Return value: one long Integer, request ID ，It is the only identifier in the callback list. It is a non-zero value and has no other meaning. You can pass this value to 						window.cancelAnimationFrame() To cancel the callback function.
            
	Note: if you want to continue updating the next frame of animation before the browser redraws next time, the callback function itself must be called again window.requestAnimationFrame()
 
2. window.cancelAnimationFrame(requestID)
    Cancel a previously called window.requestAnimationFrame()Method is added to the animation frame request in the plan.
    requestID Previously called window.requestAnimationFrame()Method, which is a time identifier. Its usage is the same as that of the timer id similar.