Mobile performance:
First, reduce or avoid repaint, reflow is page repaint, page reflow
reflow:
almost unavoidable. Some popular effects on the interface, such as the folding and expansion of tree-like directories
(essentially the display and hiding of elements), will cause browser reflow.
Mouse over, click... As long as these actions cause changes in the footprint, positioning, margins and other properties of certain elements on the page,
they will cause re-rendering within, around, and even the entire page.
First, reduce or avoid repaint, reflow is page repaint, page reflow
reflow:
almost unavoidable. Some popular effects on the interface, such as the folding and expansion of tree-like directories
(essentially the display and hiding of elements), will cause browser reflow.
Mouse over, click... As long as these actions cause changes in the footprint, positioning, margins and other properties of certain elements on the page,
they will cause re-rendering within, around, and even the entire page.
repaint:
1: Do not change the style of the child element through the parent, it is best to change the style of the child element directly, and change the style of the child element as much as possible without affecting the size and dimensions of the parent element and sibling elements
1: Do not change the style of the child element through the parent, it is best to change the style of the child element directly, and change the style of the child element as much as possible without affecting the size and dimensions of the parent element and sibling elements
2: Try to design the element style through class, and avoid using style (js to change the style)
3: To realize the animation of the element, its position attribute should be set to fixed or absolute
4: Weigh the smoothness of the speed. For example, implement an animation that moves in units of 3 pixels.
5: Another reason not to use tables layout is that once an element in tables triggers reflow, it will cause all other elements in the table to reflow. In the case where table is suitable, you can set table-layout to auto or fixed, so that the table can be rendered line by line.
6: No expression in css
7. Avoid unnecessary complex CSS selectors, especially descendants Selector
8: Try not to add, modify, and delete elements too frequently,
so as to first extract the dom node into memory for complex operations, and then display it on the page, so as to first extract the dom node to the Perform complex operations in memory and then display them on the page
9: Pay attention to co-located methods written together
3: To realize the animation of the element, its position attribute should be set to fixed or absolute
4: Weigh the smoothness of the speed. For example, implement an animation that moves in units of 3 pixels.
5: Another reason not to use tables layout is that once an element in tables triggers reflow, it will cause all other elements in the table to reflow. In the case where table is suitable, you can set table-layout to auto or fixed, so that the table can be rendered line by line.
6: No expression in css
7. Avoid unnecessary complex CSS selectors, especially descendants Selector
8: Try not to add, modify, and delete elements too frequently,
so as to first extract the dom node into memory for complex operations, and then display it on the page, so as to first extract the dom node to the Perform complex operations in memory and then display them on the page
9: Pay attention to co-located methods written together