Repaint and Reflow

First of all, understand that Repaint and Reflow are actually related to browser performance.
Repaint and reflow are a small part of the rendering process, but these two steps have a great impact on performance.
The process of repaint and reflow requires the browser to consume a lot of computing resources. Excessive usage will lead to a decline in web page performance

the difference

Redrawing is when a node needs to change its appearance without affecting the layout. For example, changing a divbackground color is called redrawing

Redrawing: refers to changing the appearance of a part of the elements, does not involve layout changes, and consumes less performance.

Reflow is called reflow when the layout or properties need to be changed

Reflow: Refers to the change of the page layout, which requires recalculation of the attributes of the elements, which consumes a lot of performance.

insert image description here

Repaint and Reflow Relationships

A reflow is bound to cause a redraw, and a redraw does not necessarily cause a reflow. The cost of reflow is much higher than that of redrawing, and changing the deep
node is likely to cause a series of reflow of the parent node

Personal understanding: When reflowing, the entire page will change, and reflowing only changes the appearance of some elements in the page, so
reflowing will definitely cause the appearance of page elements to be re-rendered or changed (redrawing),
while redrawing only changes the appearance of elements and will not affect the entire page

Events that may cause redraw and reflow:

change window size
change font
Add or remove styles
text change
position or float
box model
亿点小知识：很多人不知道的是，重绘和回流其实和 Event loop 有关。
When the Event loop finishes executing Microtasks, it will determine whether the document needs to be updated. - Because the
browser has a refresh rate of 60Hz, it will be updated every 16ms
Then judge whether there is resize or scroll, and if so, it will trigger the event, so the resize and
scroll event will only be triggered once at least 16ms, and it has a throttling function.
Determine whether a media query is triggered
update animation and send event
Determine whether there is a full-screen operation event
Execute the requestAnimationFrame callback
Execute IntersectionObserver callback, this method is used to judge whether the element is visible, it can be used
for lazy loading, but the compatibility is not good
update interface

The above is what might be done in one frame. If there is idle time in a frame,
the requestIdleCallback callback will be executed.

Optimizing performance and reducing redraws and reflows:

Use translate instead of top

< div class="dome"> < /div>
<style>
.dome{
    
    
position: absolute;
top: 20px;
background: red;
}
</style>
<script>
setTimeout(() => {
    
    
// 会引起回流
document.querySelector( '.dome').style.top = '50px'
}, 1000)
</script>

Replace display: none with visibility, as the former will only cause a redraw, the latter will cause a reflow
(changing the layout)
Avoid table layout
Avoid setting multi-layer inline styles and avoid too many node levels
avoid css expressions

insert image description here
The above is Repaint and Reflow. Thank you for reading.
If you encounter other problems, you can discuss and study with me in private.
If it is helpful to you, please 点赞bookmark it. Thank you~!
Pay attention to favorite bloggers and will continue to update...