Explore the similarities, differences and applicable fields of reflow and redraw

In-depth discussion of reflow and redraw: differences and application scenarios, specific code examples are required

Foreword:

In front-end development, reflow (reflow ) and repaint are common concepts. They are closely related to page rendering and are crucial for performance optimization. This article will delve into the differences between reflow and redraw and their application scenarios, and give specific code examples.

1. What is reflow?

Reflow refers to the process in which the browser recalculates and draws modified elements. When we change the style of an element (such as changing the width, height, and position), the browser will recalculate the geometric properties of the element and its sub-elements and re-render the page. This process is relatively performance-intensive.

Reflow will cause the calculation and layout of other elements, so its overhead is much greater than redrawing. Many times, we need to avoid frequent reflows to improve page performance.

2. What is repaint?

Redrawing refers to the browser redrawing the page based on the style information of the element, but does not change the geometric properties of the element. When we only modify the element's color, background and other styles that have nothing to do with geometric properties, the browser will only perform a redraw operation without reflowing.

The cost of redrawing is smaller because it only needs to redraw the displayed part and will not affect the layout of other elements. But too much redrawing will still have a certain impact on performance.

3. The difference between reflow and redraw

The biggest difference between reflow and redraw is the performance overhead and scope of impact.

Reflow is expensive: Reflow will cause the browser to recalculate and render elements, and the scope of impact is usually the entire page or part of the page. If the reflow operation is triggered frequently, the rendering performance of the page will decrease, or even the page will freeze.

The cost of redrawing is small: redrawing will only redraw the elements with modified styles, and will not cause the recalculation and layout of the page. Therefore, the overhead of redrawing is relatively small and has a small impact on the performance of the page.

4. Application scenarios of reflow and redraw

1. Reduce reflow operations: During development, you should try to avoid triggering reflow operations frequently. You can reduce the occurrence of reflow through the following points:

• Use the position attribute to replace top/left and other operations that change the position of the element. You can instead use transform: translate() to move the element. , the transform attribute will only trigger redraw but not reflow.
• Avoid operating style attributes in a loop. You can use batch modification of styles to reduce the number of reflows.
• To avoid obtaining element layout information when the page is loaded, you can use an asynchronous method to obtain layout information.

Specific code examples:

// 错误示例，频繁触发回流
for (let i = 0; i < 100; i++) {
  element.style.width = '200px';
  element.style.height = '200px';
  element.style.left = i * 10 + 'px';
}

// 正确示例，减少回流
element.style.position = 'absolute';
for (let i = 0; i < 100; i++) {
  element.style.transform = 'translateX(' + i * 10 + 'px)';
}

2. Reasonable use of redraw operations: In some cases where only the style changes, redraw can be used to optimize performance.

Specific code examples:

// 错误示例，频繁触发回流
for (let i = 0; i < 100; i++) {
  element.style.backgroundColor = 'red';
}

// 正确示例，只触发重绘
for (let i = 0; i < 100; i++) {
  element.style.color = 'red';
}

Summary:

Reflow and redraw are common concepts in front-end development and are crucial to page performance optimization. The reflow overhead is larger and the redraw overhead is smaller. During development, you should try to avoid triggering reflow operations frequently and use redraw operations rationally to reduce performance overhead. The above is an in-depth discussion of the differences and application scenarios of reflow and redrawing. I hope it will be helpful to everyone's front-end development.

Reference:

• [Why is reflow so slow](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex- layouts-and-layout-thrashing)

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