Mobile-side performance traps and hardware acceleration

1. Reduce or avoid repaint/page redraw, reflow/page reflow

Repaint: Changes in style, such as color

Reflow: The cost of change is greater than repaint

Can also be understood as manipulation of DOM elements

2. Try to cache all data that can be cached

3. Use Css3transform instead of DOM operation, ANIMATE.CSS

Non-mainstream performance optimization principles

1. Do not add CSS animations to non-static positional elements (such as absolute,relative)

2. Proper use of hardware acceleration

A simple example of drawing a picture onto a canvas will trigger a hardware acceleration

Or, add transfrom to the layer such as Transform:translate3d (0,0,0)

Mobile-side performance traps and hardware acceleration