Redraw:
Nodes change without affecting the layout. Such as visbility, color, background-color
Return:
The layout of a page is updated, and the backflow of a Dom node results in backflow of its children, parents, ancestors, and any nodes that follow. Reflux is the main factor affecting performance.
Optimization strategy:
Read less with the following attributes: When the following properties are read, the browser triggers backflow and redraw to ensure the correct values are obtained, Cache offsetTop offsetLeft offsetWidth offsetHeight clientTop clientLeft clientWidth clientHeight scrollTop scrollLeft scrollWidth scrollHeight width height
CSS optimization
- Avoid table layouts
- Change the class at the end of the Dom tree
- Animation effects are used on absolute and fix positions
- Avoid USING CSS expressions
JS optimization
- Avoid manipulating styles too often, and it’s best to rewrite the style at once
- Avoid frequent manipulation of DOM elements