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.
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');
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
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');
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)';
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; }
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!