Tips for optimizing CSS to reduce page reflows and repaints

How to avoid unnecessary CSS reflow and redraw

In front-end development, CSS is an indispensable part. However, improper use of CSS can lead to reduced page performance, with the most common problem being unnecessary CSS reflows and redraws. This article will introduce some tips and specific code examples to help you avoid these problems and improve the performance of your pages.

1. Avoid frequent style updates

Reflow and redrawing are triggered based on changes in the style attributes of DOM elements, so frequently updating styles will increase the risk of reflow and redrawing frequency. To avoid this problem, you can reduce the number of reflows and redraws by concentrating style updates into a single operation. For example, if you need to modify multiple style attributes of an element, you can add a class instead of modifying the attributes one by one. The sample code is as follows:

// 不推荐的写法
element.style.width = '100px';
element.style.height = '200px';
element.style.background = 'red';

// 推荐的写法
element.classList.add('my-class');

2. Avoid modifying styles in a loop

Modifying style properties in a loop is a common problem because each modification will cause reflow and reflow. painted. To avoid this problem, you can move the calculation and modification of style properties outside of the loop. The sample code is as follows:

// 不推荐的写法
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = i * 10 + 'px';
}

// 推荐的写法
let styles = '';
for (let i = 0; i < elements.length; i++) {
  styles += `#${elements[i].id} { width: ${i * 10}px; }`;
}
element.styleSheet
  ? element.styleSheet.cssText = styles // IE
  : element.innerHTML = styles; // Others

3. Use CSS animation instead of JavaScript animation

Using JavaScript to implement animation may result in frequent reflows and redraws. In contrast, using CSS animations is more efficient because it takes advantage of hardware acceleration. The sample code is as follows:

/* CSS */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* JavaScript */
element.classList.add('spin');

4. Use CSS3 properties to optimize performance

CSS3 introduces some properties that can optimize the performance of reflow and redraw. For example, use transform instead of left and top to change the position of an element, or use translate3d to turn on hardware acceleration. The sample code is as follows:

/* 不推荐的写法 */
element.style.left = '100px';
element.style.top = '200px';

/* 推荐的写法 */
element.style.transform = 'translate(100px, 200px)';

5. Use the will-change attribute

##will-change attribute to tell the browser that the element will changes that occur, thereby optimizing in advance. Using the will-change attribute can let the browser know which properties may trigger reflow or redraw, so that optimization can be performed in advance. The sample code is as follows:

.element {
  will-change: transform;
}

Summary

Optimize performance by avoiding frequent updates of styles, modifying styles in loops, using CSS animations instead of JavaScript animations, using CSS3 properties and using

will-change attribute, we can effectively avoid unnecessary CSS reflow and redrawing and improve page performance. Of course, the specific optimization method should also be adjusted and optimized according to the needs and specific circumstances of the project.

The above is the detailed content of Tips for optimizing CSS to reduce page reflows and repaints. For more information, please follow other related articles on the PHP Chinese website!