Tips and methods to reduce reflow and redraw operations

How to avoid frequent reflow and redraw operations

Reflow and repaint are two important operations when the browser renders the page. Reflow refers to the browser recalculating the position and size of elements based on changes in the DOM tree, while redrawing redraws the page based on the calculation results. These two operations consume a lot of computing resources and cause page performance to degrade. Therefore, avoiding frequent reflow and redraw operations is critical to optimizing web page performance.

This article will introduce some effective methods to avoid frequent reflow and redraw operations, and provide specific code examples.

1. Use the transform attribute of CSS
   When you need to perform operations such as displacement, rotation, and scaling of elements, you should try to use the transform attribute of CSS instead of directly modifying the left, top, and width of the element. , height and other attributes. Because the transform operation will not trigger reflow, it will only trigger a redraw operation, thus improving performance.

Sample code:

// 不推荐的方式
element.style.left = '100px';
element.style.top = '200px';
element.style.width = '300px';
element.style.height = '400px';

// 推荐的方式
element.style.transform = 'translate(100px, 200px) scale(1.5)';

2. Avoid frequent access to layout properties
   If you need to frequently read the layout properties of elements in JavaScript, such as offsetWidth, offsetHeight, clientWidth, clientHeight, etc., access to these properties should be minimized to avoid causing frequent reflow operations.

Sample code:

// 不推荐的方式
for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    console.log(element.offsetWidth);
}

// 推荐的方式
const length = elements.length;
for (let i = 0; i < length; i++) {
    const element = elements[i];
    console.log(element.offsetWidth);
}

3. Using virtual DOM
   Virtual DOM is a technology that represents the real DOM through JavaScript objects, which can be reduced by batch updates Reflow and redraw operations. When a large number of DOM elements need to be modified frequently, you can first perform batch processing through the virtual DOM, and then update the real DOM at once, thereby reducing the number of reflows and redraws.

Sample code:

// 创建虚拟DOM
const virtualDOM = document.createElement('div');
virtualDOM.style.width = '200px';
virtualDOM.style.height = '300px';

// 批量批处理
for (let i = 0; i < 1000; i++) {
    const element = document.createElement('span');
    element.innerText = 'Hello Virtual DOM';
    virtualDOM.appendChild(element);
}

// 一次性更新真实DOM
document.body.appendChild(virtualDOM);

4. Using throttling and debounce
   Throttle and debounce are commonly used techniques to optimize page performance . Throttling can limit the trigger frequency of events to prevent reflow and redraw operations caused by frequent triggers; anti-shake can delay the trigger time of events to achieve the effect of triggering only one event in a short period of time, thereby reducing the number of reflow and redraw operations.

Sample code:

// 节流方式
function throttle(fn, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                fn.apply(this, arguments);
            }, delay);
        }
    };
}

// 防抖方式
function debounce(fn, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}

// 使用节流方式绑定事件
element.addEventListener('scroll', throttle(function() {
    // 处理滚动事件
}, 200));

// 使用防抖方式绑定事件
element.addEventListener('resize', debounce(function() {
    // 处理调整窗口大小事件
}, 200));

Through the above methods, we can effectively avoid frequent reflow and redraw operations and improve the performance and user experience of the page. During the development process, attention should be paid to the rational use of the CSS transform attribute, reducing access to layout attributes, using virtual DOM for batch processing, using throttling and anti-shake technology, etc. Carefully optimizing the rendering operation of the page can bring users a faster and smoother browsing experience.

The above is the detailed content of Tips and methods to reduce reflow and redraw operations. For more information, please follow other related articles on the PHP Chinese website!