Frequent redraws and reflows: why should they be avoided?

Redraw and reflow: why should it be avoided frequently?

In front-end development, we often hear two concepts: redrawing and reflow. They refer to the two key processes when the browser renders the page. Redrawing refers to the process when the appearance of an element changes and the display needs to be updated; reflow refers to the process when the geometric properties of the element change and the layout needs to be recalculated and redrawn.

Redrawing and reflowing are very performance-consuming operations. Frequent occurrence will lead to a decrease in page performance, and even cause lags and slower page loading. Therefore, we should try our best to avoid frequent redrawing and reflow during development. Next, let’s look at some common situations that lead to redraws and reflows, and how to avoid them.

1. Avoid frequently modifying the style of DOM elements

When we frequently modify the style of DOM elements, the browser will frequently trigger redraws and reflows. Therefore, when modifying the style of DOM elements, it is best to merge the modification operations together and implement style switching by modifying the class name of the element, which can reduce the number of redraws and reflows.

// 不推荐写法
var element = document.getElementById('example');
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

// 推荐写法
var element = document.getElementById('example');
element.classList.add('active');

2. Use transform attribute instead of top/left attribute

When using top/left attribute to change the position of an element, redraw and reflow will be triggered. Using the transform attribute (such as translateX/translateY) to change the position of the element will not trigger reflow, but only trigger redrawing. Therefore, it is best to use the transform attribute when you need to change the position of an element.

// 不推荐写法
var element = document.getElementById('example');
element.style.left = '100px';
element.style.top = '100px';

// 推荐写法
var element = document.getElementById('example');
element.style.transform = 'translate(100px, 100px)';

3. Avoid frequently reading the size attributes of elements

Every time the size attributes of an element are read (such as offsetWidth, offsetHeight), reflow will be triggered, and these attributes will be read. The value of is a relatively performance-consuming operation. Therefore, we should try to avoid frequently reading the size properties of elements. We can cache these values ​​​​or obtain them all at once when necessary.

// 不推荐写法
var element = document.getElementById('example');
var width = element.offsetWidth;
var height = element.offsetHeight;

// 推荐写法
var element = document.getElementById('example');
var rect = element.getBoundingClientRect();
var width = rect.width;
var height = rect.height;

4. Use documentFragment to optimize multiple insertions of nodes

Inserting nodes is an operation that will trigger reflow. If you need to insert nodes multiple times, it is best to use documentFragment to optimize. Add multiple nodes to the documentFragment and insert them into the DOM all at once.

// 不推荐写法
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  document.body.appendChild(element);
}

// 推荐写法
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
  var element = document.createElement('div');
  fragment.appendChild(element);
}
document.body.appendChild(fragment);

Through the optimization of the above aspects, we can effectively reduce the number of redraws and reflows, and improve the performance and user experience of the page. In actual development, we can also use some tools and libraries to help us detect and optimize redraw and reflow problems, such as Chrome DevTools and performance analysis tools.

To summarize, redrawing and reflow are important factors that affect page performance, and they should be avoided as frequently as possible in front-end development. By merging style modifications, using transform attributes, avoiding frequent reading of size attributes, and using documentFragment to optimize multiple insertions of nodes, we can effectively optimize page performance and improve user experience.

The above is the detailed content of Frequent redraws and reflows: why should they be avoided?. For more information, please follow other related articles on the PHP Chinese website!