The key to page performance: optimize the front end to avoid page redraws and reflows

Essentials for front-end optimization: How to effectively avoid page redrawing and reflow, specific code examples are needed

With the rapid development of the Internet, front-end development in terms of web page performance optimization become increasingly important. Among them, avoiding page redraws and reflows is a key factor in improving web page performance. This article will introduce some effective methods and specific code examples to help front-end developers effectively reduce page redraws and reflows and improve user experience.

1. Causes and effects of page redrawing and reflow

1. Page redrawing: means that when the style of an element changes, the browser needs to redraw part or all of the element. content. For example, when the style attributes such as color and background of an element are modified, the element will be redrawn.
2. Page reflow: means that when the page layout and geometric attributes change, the browser needs to recalculate the layout and geometric attributes of the elements, and then update the rendering results of the page. For example, when the size, position and other attributes of an element are modified, the reflow of the element and its ancestor elements will be triggered.

Redraw and reflow will cause the browser to recalculate and render the page, consuming additional computing resources and time, thus affecting the performance and response speed of the page. Especially on mobile devices, this performance loss is even more significant.

2. Methods to avoid page redrawing and reflow

1. Use virtual DOM: Virtual DOM can avoid frequent page redrawing and reflow. It works by saving the elements and state on the page in memory, then updating only the changed parts, and finally rendering the changed parts to the page. It can be implemented using the virtual DOM mechanism provided by front-end frameworks such as React and Vue.

2. Operation DOM in batches: Reduce the number of direct operations on DOM and try to perform DOM operations in batches. When you need to modify the element style multiple times, you can modify the styles of multiple elements at once by adding or deleting classes.

   // 错误示例：多次修改元素样式
   element.style.width = '100px';
   element.style.height = '200px';
   element.style.backgroundColor = 'red';
   
   // 正确示例：一次性修改元素样式
   element.classList.add('modified');

3. Avoid forced synchronization of layout: For operations that require obtaining element layout information, such as offsetWidth, offsetHeight, etc., the number of calls should be minimized. If you need to obtain element layout information multiple times, you can save it in a variable first and then reuse it.

   // 错误示例：多次获取元素布局信息
   for (let i = 0; i < elements.length; i++) {
    console.log(elements[i].offsetWidth);
    console.log(elements[i].offsetHeight);
   }
   
   // 正确示例：一次获取元素布局信息
   for (let i = 0; i < elements.length; i++) {
    const width = elements[i].offsetWidth;
    const height = elements[i].offsetHeight;
    console.log(width);
    console.log(height);
   }

4. Use animation optimization: When you need to use animation effects, avoid directly modifying the style attributes of the element, try to use CSS animation or use the requestAnimationFrame method for optimization. CSS animation can use the transform attribute to achieve animation effects such as displacement and scaling without triggering page reflow.

   /* CSS动画示例 */
   .box {
    transition: transform 1s;
   }
   
   .box:hover {
    transform: translateX(100px);
   }

   /* requestAnimationFrame示例 */
   function animate() {
    element.style.transform = `translateX(${x}px)`;
   
    if (x < targetX) {
    requestAnimationFrame(animate);
    }
   }
   
   animate();

5. Use document fragments: When you need to dynamically generate multiple DOM nodes, you can use document fragments (DocumentFragment) to improve performance. A document fragment is a virtual DOM container, which can be used to add multiple DOM nodes directly to the document, reducing multiple reflow operations.

   // 错误示例：逐个添加DOM节点
   for (let i = 0; i < data.length; i++) {
    const item = document.createElement('li');
    item.textContent = data[i];
    list.appendChild(item);
   }
   
   // 正确示例：使用文档片段添加DOM节点
   const fragment = document.createDocumentFragment();
   
   for (let i = 0; i < data.length; i++) {
    const item = document.createElement('li');
    item.textContent = data[i];
    fragment.appendChild(item);
   }
   
   list.appendChild(fragment);

3. Summary

This article introduces several methods to avoid page redrawing and reflow, and provides specific code examples. By properly using these methods, front-end developers can effectively reduce page redraws and reflows, improve web page performance, and provide a better user experience. In actual development, developers can also optimize based on specific scenarios to further improve the performance of web pages.

The above is the detailed content of The key to page performance: optimize the front end to avoid page redraws and reflows. For more information, please follow other related articles on the PHP Chinese website!