What is reflow and redraw

Reflow means that when the layout of the page changes, the browser needs to recalculate the position and size of the elements in the rendering tree. This process involves traversing the rendering tree, calculating the geometric properties of each element, and then updating the layout. , reflow is a very performance-consuming operation because it triggers the browser to relayout the entire page. Redrawing means that when the style of the page changes, the browser needs to redraw the affected elements. Redrawing does not involve the calculation of the layout. It only needs to redraw the appearance of the elements. Compared with reflow, the performance of redrawing is Less overhead.

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

Reflow and redraw are very important concepts in web page performance optimization. Before understanding these two concepts, we first need to understand the process of browser rendering pages.

When the browser loads a web page, it parses the HTML document into a DOM tree, and then parses the CSS styles into a CSSOM tree. Next, the browser will merge the DOM tree and CSSOM tree into a render tree (Render Tree). Finally, the browser layouts and draws the page according to the rendering tree.

Reflow means that when the layout of the page changes, the browser needs to recalculate the position and size of elements in the rendering tree. This process involves traversing the render tree, calculating the geometric properties of each element, and then updating the layout. Reflow is a very performance-intensive operation because it triggers the browser to relayout the entire page.

Repaint means that when the style of the page changes, the browser needs to redraw the affected elements. Redrawing does not involve layout calculations, it only requires redrawing the appearance of the element. Compared with reflow, redrawing has less performance overhead.

Frequent reflows and redraws will lead to reduced page performance, so it is necessary to minimize the number of reflows and redraws in web development. The following are some common operations that lead to reflow and redrawing:

1. Modify the geometric properties of DOM elements, such as changing the width, height, position, etc. of the element.

2. Modify the style of DOM elements, such as changing the background color, font size, etc. of the element.

3. Add or remove DOM elements.

4. Modify the browser window size.

In order to reduce the number of reflows and redraws, we can adopt the following optimization strategies:

1. Use the CSS transform attribute instead of modifying the position and size of elements. The transform attribute does not trigger reflow, only redraw, so the performance overhead is small.

2. Modify the style attributes that need to be modified multiple times together, and then apply them to the DOM element. This reduces the number of reflows and redraws.

3. Use Document Fragment to add or delete DOM elements in batches. A document fragment is a temporary DOM container in which multiple DOM operations can be placed, and then the content of the document fragment is added to the page at once, which can reduce the number of reflows.

4. To avoid frequently changing the browser window size, you can use throttling or debouncing to control the frequency of event triggering.

In short, reflow and redrawing are issues that need to be focused on in web page performance optimization. By reducing the number of reflows and redraws, we can improve the rendering performance of web pages and improve the user experience.

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