Reduce the number of web page redraws and reflows: ways to optimize web page performance

Optimize web page performance: How to reduce the number of redraws and reflows?

With the development of the Internet, web page performance optimization has become one of the important issues that developers pay attention to. During the loading process of web pages, redrawing and reflow are the two main factors affecting performance. This article explains how to reduce the number of redraws and reflows, and provides some concrete code examples.

1. Use appropriate CSS properties

When writing CSS code, you should try to avoid using properties that will cause redrawing and reflow. For example, you can set frequently changing style attributes to a class, and then use JavaScript to switch the class instead of directly modifying the element's style. This reduces the number of redraws and reflows.

Example:

<div id="myElement" class="red"></div>

<script>
  var element = document.getElementById('myElement');
  element.classList.toggle('red');
</script>

2. Use event delegation

When handling events, try to use event delegation to reduce the number of event bindings. Bind the event to the parent element, and then handle it accordingly depending on the event target. This can avoid a large number of event bindings and reduce the number of reflows.

Example:

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  var list = document.getElementById('myList');
  list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log('You clicked on:', event.target.textContent);
    }
  });
</script>

3. Batch modification of DOM

When you need to modify the DOM elements multiple times, you should try to use DocumentFragment or change the DOM elements from Remove it from the document flow and insert it again after the modification is completed. This avoids frequent reflow processes and improves performance.

Example:

var fragment = document.createDocumentFragment();

for (var i = 0; i < 1000; i++) {
  var element = document.createElement('div');
  element.textContent = 'Item ' + i;
  fragment.appendChild(element);
}

document.body.appendChild(fragment);

4. Use CSS animation instead of JavaScript animation

When you need to animate elements, try to use CSS animation instead of JavaScript animation . CSS animations utilize GPU acceleration for better performance and can reduce the number of redraws and reflows.

Example:

<div id="myElement"></div>

<style>
  #myElement {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 1s;
  }

  #myElement:hover {
    width: 200px;
  }
</style>

5. Use throttling function or anti-shake function

When events are triggered frequently, you can use throttling function or anti-shake function To control the triggering frequency of events and reduce the number of reflows. The throttling function executes the function periodically, while the debounce function executes the function some time after the last trigger.

Example:

function throttle(func, delay) {
  var timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

function debounce(func, delay) {
  var timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      func.apply(this, arguments);
    }, delay);
  };
}

// 使用节流函数
window.addEventListener('scroll', throttle(function() {
  console.log('Scroll event');
}, 200));

// 使用防抖函数
window.addEventListener('resize', debounce(function() {
  console.log('Resize event');
}, 200));

By optimizing web page performance and reducing the number of redraws and reflows, the web page loading speed and user experience can be improved. The above are some commonly used optimization methods and code examples. I hope they will be helpful to your work. Remember, continuing to focus on optimizing web page performance is a process of continuous learning and improvement.

The above is the detailed content of Reduce the number of web page redraws and reflows: ways to optimize web page performance. For more information, please follow other related articles on the PHP Chinese website!