Moving end performance and hardware acceleration trap

1. Reduce or avoid repaint (page redraw), reflow (page reflux)

repaint: change style, such as fonts, colors

reflow: cost changes larger than the repaint (dom be appreciated that as the operation of the element)

2. Try to cache all data can be cached

3. css3 transform operation instead of dom, animate.css

The principle of non-mainstream performance optimization

1. Do not increase css animation to non-static positioning elements (such as absolute, relative)  

2. The appropriate use of hardware acceleration

A simple example is the picture painted on canvas, it will trigger hardware acceleration

Or, to add a layer as transfrom transform: translate3d (0,0,0)

H5 mobile front-end performance optimization guidelines:

https://blog.csdn.net/wexin_37276427/article/details/82026532