Performance Optimization reflux _ redraw

Reflux and redraw

When the size, layout, and other changes render the hidden elements in the tree occurred on rebuilding needs. When the page layout and geometry attributes change needs to reflux.

When the render tree some elements update properties, but the properties only affect the appearance and style, it will not affect the layout, such as background-color.

It will trigger a page relocation of property

1. Box model related properties
2. Locate the relevant property
3. Changing internal factors node

Box Model	Locate	Writing
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
		font-size

Only trigger redraw property

Only redraw property
color
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline-color
outline
outline-style
outline-width
box-shadow

Chrome layer to create the conditions

1. 3D or perspective transformation (perspective transform) CSS properties
2. Video decoding acceleration using a node
3. 2D context node has 3D (WebGL) context or accelerated
4. CSS opacity do on their own animation or use webkit transform an animated element
5. It has accelerated CSS filter element
6. There is a descendant element node contains composite layer (one element has a child element, the child elements in its own layer in)
7. A lower element comprising a composite layer and a z-index sibling elements (in other words, the above elements are rendered in the composite layer)

New DOM process

1. After obtaining the plurality of layers is divided into a DOM
2. Style calculation results for each node of layer (Recalculate style- style weight)
3. And generating pattern position (Layout- relayout reflux) for each node
4. Each node is filled into a layer drawn bitmap (Paint Setup and redraw Paint-
5. Layers uploaded to the GPU as a texture
6. In line with multiple layers to generate the final screen image (Composite Layers- recombination layer) onto the page
   

The practical application of optimization points

1. Alternatively translate top with change
2. Alternative visibility with opacity
3. Do not modify the DOM one by one style, pre-defined class, and then modify the DOM className
4. After modifying the DOM offline, such as: first DOM to display: none (once Reflow), and then you modify 100 times, then put it up display
5. Do not attribute value DOM nodes in a loop as a loop in the variable
6. Do not use table layouts, may be small, a small change will result in re-layout of the entire table
7. Select the animation speed to achieve
8. For the new layer animation
9. Enable GPU hardware acceleration