What is repaint? What is rearrangement? What is the difference between browser redraw and reflow?

Table of contents

1. Definition of redrawing and reflowing

2. The difference between rearrangement and redrawing

3. Reasons for rearrangement and redrawing

4. The impact of rearrangement and redrawing

Browser redrawing and reflowing are important concepts in web page performance optimization, and are crucial to understanding the principles of web page rendering and improving web page performance. This article will take an in-depth look at browser redraws and reflows, including their definitions, differences, causes, effects, and how to optimize web page performance.

1. Definition of redrawing and reflowing

Browser repaint and reflow refer to the process of the browser re-rendering the web page. Reflowing refers to the process of recalculating the layout of a web page, while redrawing is the process of redrawing a web page based on new layout information. The difference between them is that rearrangement will cause the size, position, content and other attributes of the element to change, so the layout information needs to be recalculated; while redrawing means redrawing the element while the position, size and other attributes of the element remain unchanged. style.

2. The difference between rearrangement and redrawing

Although reflow and redraw both cause the browser to re-render the web page, their causes and effects are different. Rearrangements are usually caused by:

Add, remove or change DOM elements.
Modify the size, position, margin, padding, border and other style attributes of the element.
Modify the font size, style, etc. of the page.
User interaction events, such as window size changes, scrolling, etc.

Redrawing is usually caused by the following reasons:

Modify the element's background color, border color and other style attributes.
Add or delete pseudo-classes of elements, such as:hover, etc.
Manipulate canvas, SVG and other graphic elements.

Both reflow and redraw have an impact on web page performance, but the impact of reflow is more severe because it requires recalculation of layout information. Therefore, we need to reduce the number of reflows as much as possible to improve web page performance.

3. Reasons for rearrangement and redrawing

The reasons for reflowing and redrawing have been mentioned above. Here is a brief introduction.

Adding, deleting or changing DOM elements: These operations will cause the browser to recalculate the position, size and other information of the element, thus triggering reflow.
Modify the size, position, margin, padding, border and other style attributes of the element: these operations will also cause the browser to recalculate the layout information of the element, thus triggering reflow.
Modify the font size, style, etc. of the page: These operations will affect the rendering of the page, thereby triggering reflow or redrawing.
User interaction events: These events trigger page reflows and redraws. For example, changing the window size will cause the page to be re-layout, thus triggering a reflow; scrolling will cause the page to be redrawn, thus triggering a redraw.

4. The impact of rearrangement and redrawing

Reflow and repaint will have an impact on web page performance, and the degree of impact depends on the complexity of the web page and the frequency of operations. Here are the effects of reflow and redraw on web page performance:

Impact of rearrangement: Rearrangement is a relatively performance-consuming operation because it requires recalculation of the layout information of the elements. Frequent reflows will lead to slow response speed of web pages, page freezes, and poor user experience.
Impact of redrawing: Compared to reflowing, redrawing has a smaller impact because it only requires redrawing the style of the element and does not require recalculation of layout information. However, if redraw operations are frequent, it will also have a certain impact on web page performance.

5. How to reduce reflow and redraw

In order to improve web page performance, we need to reduce the number of reflows and redraws as much as possible. Here are some ways to reduce reflows and redraws:

Avoid frequent DOM operations: DOM operations will cause rearrangement and redrawing, so we need to reduce the number of DOM operations as much as possible. For example, you can add multiple elements at once instead of adding them one by one; you can use documentFragment to operate the DOM in batches, etc.
Use CSS3 animation: CSS3 animation can use GPU acceleration to reduce the number of reflows and redraws. Animations implemented using JavaScript will result in frequent reflows and redraws.
Avoid using table layout: table layout is complex and will lead to frequent rearrangements and redraws. You can use flex layout or grid layout instead.
Use CSS Sprite: CSS Sprite can reduce the number of image requests, thereby reducing the number of reflows and redraws.
Avoid frequent repeated styles: use classes or inherited styles as much as possible to reduce repeated style codes, avoid frequent style changes, and reduce the number of rearrangements and redraws.
Use position:absolute or fixed positioning: Use position:absolute or fixed positioning to break away from the document flow and reduce the number of reflows.
Place the style sheet at the head: Placing the style sheet at the head can avoid delayed loading of the style sheet and reduce the number of reflows and redraws.

6. Summary

Browser reflow and redraw are important concepts in web page performance optimization. Understanding their principles and effects can help us better optimize web page performance. Rearrangement is a relatively performance-intensive operation because it requires recalculating the layout information of the elements. Frequent reflows will lead to slow response speed of web pages, page freezes, and poor user experience. The impact of redrawing is relatively small, because it only needs to redraw the style of the element and does not need to recalculate the layout information. However, if redraw operations are frequent, it will also have a certain impact on web page performance.

In order to reduce the number of reflows and redraws, we can avoid frequent DOM operations, use CSS3 animation, avoid using table layout, use CSS Sprite, avoid frequent repeated styles, use position:absolute or fixed positioning, and put the style sheet in Head and other methods. Through these methods, the number of reflows and redraws can be effectively reduced, thereby improving the response speed and user experience of web pages.

In short, reflow and redraw are important concepts in web page performance optimization. We need to understand their principles and impacts, and take effective measures to reduce their frequency, thereby improving web page performance and user experience.