Optimizing web page performance: The impact of reflow and redraw and how to deal with it

The impact of reflow and redrawing on web page performance and optimization methods

When we open a web page in the browser, the rendering process of the web page can be divided into four Stage: parse HTML, build DOM tree, build CSSOM tree, merge DOM and CSSOM trees and generate rendering tree, and finally layout and draw the page according to the rendering tree. In this rendering process, reflow and repaint are two very important concepts.

Reflow refers to the process in which the browser recalculates the geometric properties of the elements in the page and re-lays out the page when the size, position or content of the DOM element changes. Redrawing means that when the style of an element changes, but does not affect its geometric properties on the page, the browser only needs to redraw the element without relayout.

The frequent occurrence of reflow and redraw will have a great impact on the performance of the page, because the browser needs to recalculate the geometric attributes of the elements and re-layout the page during the reflow process. This process is very consumption-intensive. performance. Similarly, redrawing will also affect the performance of the page. Although it is less expensive than reflow, it will still consume certain resources.

In order to optimize web page performance, we need to reduce the number of reflows and redraws as much as possible. Here are some optimization methods:

1. Use style centralization: Centralize all operations that modify the style of a certain DOM element and execute them together to avoid multiple reflows and redraws caused by multiple style modifications. For example, you can use CSS classes to modify the styles of multiple elements at once instead of modifying them one by one.
2. Use document fragments: When you need to insert a large number of nodes into the DOM, you can use the document fragment (Document Fragment) to first insert these nodes into the document fragment, and then insert the document fragment into the DOM at once. , which can reduce the number of reflows and redraws.
3. Set the style as a batch operation: Modifying the style by modifying the style attribute of the element will cause reflow and redrawing, so it is best to concentrate the operations of modifying the style together, by modifying the element's classList, className or style attributes to operate styles in batches instead of modifying them one by one.
4. Avoid using forced synchronization layout attributes: The reading of certain attributes will force the browser to perform synchronous layout and cause reflow, such as offsetLeft, offsetTop, offsetWidth, offsetHeight, clientWidth, clientHeight, scrollTop, scrollLeft and other attributes. Whenever possible, avoid reading these properties repeatedly when frequently changing the style of an element.
5. Use transform and opacity attributes: transform and opacity attributes will not cause reflow, only redraw. Therefore, when changing the position, size and other attributes of elements, try to use these two attributes.
6. Use throttling and anti-shake functions: When monitoring browser window size changes, scrolling and other events, use throttling and anti-shake functions to limit the number of reflows and redraws and avoid frequent triggering.

The following are some specific code examples:

// 使用样式集中化
document.getElementById('elementId').classList.add('new-class');

// 使用文档片段
var fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
  var div = document.createElement('div');
  div.textContent = 'This is a div';
  fragment.appendChild(div);
}
document.getElementById('container').appendChild(fragment);

// 批量操作样式
var elements = document.getElementsByClassName('elements');
for (var i = 0; i < elements.length; i++) {
  elements[i].classList.add('new-class');
}

// 避免强制同步布局属性
var width = element.offsetWidth; // 读取元素的宽度

// 使用transform和opacity属性
element.style.transform = 'translateX(100px)';
element.style.opacity = 0.5;

// 使用节流函数
function throttle(fn, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

window.addEventListener('resize', throttle(function() {
  // 窗口大小变化时的处理逻辑
}, 200));

By adopting the above optimization methods, we can reduce the number of reflows and redraws, thereby improving the performance and user experience of the web page. At the same time, during the development process, we also need to pay attention to avoid frequently modifying the style and layout of elements, and minimize the triggering of unnecessary reflow and redraw.

The above is the detailed content of Optimizing web page performance: The impact of reflow and redraw and how to deal with it. For more information, please follow other related articles on the PHP Chinese website!