Reflow and Repaint are triggered during browser rendering (page initialization, user behavior changing the style of the interface, animation changing the style of the interface, etc.) and can greatly affect web performance, 2 especially for mobile pages. So we need to keep reflow and Repaint to a minimum in our page design. Reflow reflow
When a child element changes in style that directly affects its parent element and traces back many of its ancestors (including its siblings), the browser rerenders all elements associated with the child element.
Some of the effects currently prevalent in the interface, such as drawers and unfurls (essentially showing and hiding elements), will cause reflow in the browser. Mouse slide, click… As long as these behaviors cause changes in the space area, positioning mode, margin and other attributes of some elements on the page, will cause it to be inside, around and even the whole page to be re-colored, they all affect each other. Repaint redraw
Simply changing an element’s background color, text color, border color, etc., without affecting its surrounding or internal layout, will only cause the browser to repaint. Repaint is significantly faster than reflow, and repainting does not necessarily trigger repainting
Several situations in which backflow occurs
1: change the window size 2: change the text size 3: change the content, such as user type in the input box 4: activate pseudo-class, such as :hover 5: operation class attribute 6: script manipulation DOM 7: calculate offsetWidth and offsetHeight 8: Set the style attribute and so on
What are some ways to reduce backflow?
1: Do not change the style of the child element through the parent. It is better to change the style of the child element directly. Changing the style of the child element should not affect the size and size of the parent element and the sibling element as much as possible. Try to design the element style by class, do not use style, that is, not through JS operation style, through CSS style operation style 3 try not to too much frequent to add, modify, refer to the blog boss please go away if there is a mistake or not strict place, please leave a comment, very thank you, to the author is also a kind of encouragement.