What are the effects of reflow and redraw?

The effects of reflow and redraw include performance loss, page flickering and page freezing. Detailed introduction: 1. Performance loss, reflow is more expensive than redrawing, because reflow needs to recalculate the layout, while redrawing only needs to redraw the appearance. Frequent reflow will cause the rendering speed of the page to slow down, affecting the user experience; 2. Page flickering. When reflow and redrawing occur frequently, the page may flicker. This is because when the browser re-renders the page, it will first clear the original content and then re-draw it. This process will cause the page to flicker. Flashing; 3. Page freezes, etc.

The operating system for this tutorial: Windows 10 system, DELL G3 computer.

Reflow and redraw are two concepts commonly used in front-end development. They have an important impact on web page performance and user experience. This article will introduce in detail the definition, difference and impact on web page performance of reflow and redraw, and provide some optimization tips.

1. Definition of reflow and redraw

1. Reflow: When the DOM structure changes, or the position, size, content and other attributes of the element change, the browser will Recalculating the geometric properties of elements and rebuilding the rendering tree is called reflow. Reflow will cause layout recalculation, which has a large overhead on performance.

2. Repaint: When the style of an element changes but does not affect its geometric properties, the browser will redraw the appearance of the element. This process is repainting. Redrawing does not change the layout and has a relatively small performance overhead.

2. The difference between reflow and redraw

The difference between reflow and redraw is whether it involves changes to the layout. Reflow causes a recalculation of the layout, while redrawing simply redraws the element's appearance. Therefore, reflow is much more expensive than redrawing.

3. The impact of reflow and redraw on web page performance

1. Performance loss: The cost of reflow is greater than that of redraw, because reflow requires recalculating the layout, while redrawing only requires redrawing the appearance. . Frequent reflows will slow down the rendering speed of the page and affect the user experience.

2. Page flickering: When reflow and redrawing occur frequently, the page may flicker. This is because when the browser re-renders the page, it will first clear the original content and then re-draw it. This process will cause the page to flicker.

3. Page freeze: When elements in the page are frequently reflowed and redrawn, the rendering speed of the page will slow down, thus affecting the user's operating experience. Especially on mobile devices, due to hardware performance limitations, the impact of reflow and redrawing on the page is more obvious.

4. Optimization techniques

In order to reduce the impact of reflow and redrawing on web page performance, we can adopt the following optimization techniques:

1. Avoid frequent modification of styles: try to Style modifications are concentrated together to avoid modifying the style of the same element multiple times. You can use CSS class selectors to modify styles in batches.

2. Use transform instead of top and left: When you need to modify the position of an element, use the transform attribute instead of directly modifying the top and left attributes. Because transform does not trigger reflow, performance can be improved.

3. Use requestAnimationFrame: Use requestAnimationFrame to perform animation effects, which can combine multiple redraws into one, reducing performance overhead.

4. Use virtual DOM technology: Virtual DOM technology can reduce the number of reflows and redraws. By comparing the differences between the virtual DOM and the real DOM, only the changed parts are updated to reduce unnecessary reflow and redrawing.

5. Avoid using table layout: table layout will trigger a large number of reflows during rendering, so try to avoid using table layout.

Summary: Reflow and redrawing have an important impact on web page performance. Frequent reflow and redrawing will cause the rendering speed of the page to slow down and affect the user experience. Through reasonable optimization techniques, the number of reflows and redraws can be reduced and the performance of web pages can be improved.

The above is the detailed content of What are the effects of reflow and redraw?. For more information, please follow other related articles on the PHP Chinese website!