Optimizing front-end performance: ways to reduce page redraws and reflows

Front-end performance tuning skills: How to reduce page redraws and reflows

In web development, front-end performance optimization is a key topic. When a user visits a web page, the response speed of the page directly affects the user experience, and one of the important aspects is the loading speed of the page. The factors that most affect the loading speed of the page are redrawing and reflowing.

Redrawing of the page refers to updating the visual part of the page according to the new style, while reflow refers to the process of recalculating the layout of the web page. Redrawing and reflow are interdependent. When an element of the page is redrawn, it will often cause the surrounding elements to reflow.

Frequent redraws and reflows will cause the page to load slower, so we need to take some techniques to reduce the frequency of redraws and reflows.

1. Avoid using table layout: table layout requires the browser to take into account the style of each cell in the table when calculating the layout. Therefore, when the elements in the table change, it will cause the entire table to reflow. .

2. Use CSS3 animations instead of JavaScript animations: In modern browsers, CSS3 provides some animation effects, such as transition and transform, which are more efficient than animation effects implemented using JavaScript because they are implemented at the hardware level. To render.

3. Reasonable use of the hidden attribute: Setting the styles of some elements that do not need to be displayed to display:none or visibility:hidden can avoid redrawing and reflowing of these elements.

4. Avoid frequent modifications to the style: When we need to modify the style of an element, it is best to focus the modifications together instead of scattering them in various places in the code. Because the browser will merge multiple style modifications, reducing the number of redraws and reflows.

5. Use document fragments to reduce node operations: When inserting a large number of nodes into the page, it is best to use document fragments to operate and then insert them into the page at once. This avoids multiple reflows.

Here are some specific code examples:

1. Avoid using table layout:

   <table>
     <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
     </tr>
   </table>

   Change to:

   <div class="row">
     <div class="cell">Cell 1</div>
     <div class="cell">Cell 2</div>
   </div>

2. Use CSS3 animation instead of JavaScript animation:

   // JavaScript动画
   function animate(element, target) {
     let position = 0;
     setInterval(() => {
    position += 1;
    element.style.left = position + 'px';
     }, 10);
   }
   
   // CSS3动画
   .element {
     transition: left 1s;
   }

3. Reasonable use of hidden attributes:

   .hidden-element {
     display: none;
     /* 或者 */
     visibility: hidden;
   }

4. Avoid frequent modification of styles:

   // 不推荐的做法
   element.style.marginTop = '10px';
   element.style.marginBottom = '20px';
   element.style.marginLeft = '30px';
   element.style.marginRight = '40px';
   
   // 推荐的做法
   element.style.margin = '10px 20px 30px 40px';

5. Use document fragments to reduce node operations:

   // 不使用文档片段
   for (let i = 0; i < 1000; i++) {
     let element = document.createElement('div');
     document.body.appendChild(element);
   }
   
   // 使用文档片段
   let fragment = document.createDocumentFragment();
   for (let i = 0; i < 1000; i++) {
     let element = document.createElement('div');
     fragment.appendChild(element);
   }
   document.body.appendChild(fragment);

Summary:
By avoiding the use of table layout and using CSS3 animations instead of JavaScript animations, it is reasonable By using hidden attributes, avoiding frequent style modifications, and using document fragments to reduce node operations, we can reduce page redraws and reflows, thereby increasing page loading speed and improving user experience. In actual work, we should use these techniques reasonably according to the specific situation to make our web pages more efficient and elegant.

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