Which is better, reflow or redraw or reflow?

Reducing reflow is a better choice, because the cost of redrawing is relatively small, while the cost of reflowing is large: 1. When the appearance style of elements changes, the browser will redraw these elements, but The layout will not change; 2. When the layout attributes of the element change, the browser will recalculate the geometric attributes of the element and rebuild the layout of the entire page.

# Operating system for this tutorial: Windows 10 system, Dell G3 computer.

Reflow, repaint and layout are different steps in the web page rendering process, and they have different impacts on website performance.

• Redraw: When the appearance style of elements (such as color, background) changes, the browser will redraw these elements, but the layout will not change. The performance overhead of redrawing is relatively small and will not cause page layout changes.

• Reflow: When the layout properties of an element (such as position, size) change, the browser will recalculate the geometric properties of the element and rebuild the layout of the entire page. Reflow has a large performance overhead, will cause the page to be rearranged, and other elements may also be affected.

So, the overhead of redrawing is relatively small, while the overhead of reflowing is large. Generally speaking, reducing reflows is a better option because it has a greater impact on page performance.

Here are some ways to reduce reflows:

1. Use CSS3 animations: CSS3 animations use GPU acceleration, which can reduce the number of reflows.

2. Batch modification styles: avoid frequently modifying the style of a single element, but instead group multiple modifications together to reduce the number of reflows.

3. Use virtual document fragments (Document Fragment): By creating virtual document fragments, perform DOM operations in memory, and finally add the document fragments to the page at once, reducing the number of reflows.

4. Use CSS3 Transitions or Transforms: These properties can take advantage of GPU acceleration and reduce the number of reflows.

5. Avoid forced synchronization of layout: by avoiding the use of some properties or methods that trigger reflow, such as offsetTop, offsetLeft, etc.

It is necessary to choose the appropriate optimization strategy according to the specific situation. If you only make some simple style modifications, the cost of redrawing may be small, but if complex layout changes are involved, you need to pay attention to reducing the number of reflows.

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