Web ページの再描画とリフローの数を減らす: Web ページのパフォーマンスを最適化する方法

Web ページのパフォーマンスを最適化する: 再描画とリフローの回数を減らすにはどうすればよいですか?

インターネットの発展に伴い、Web ページのパフォーマンスの最適化は開発者が注目する重要な問題の 1 つになりました。 Web ページの読み込みプロセス中、再描画とリフローはパフォーマンスに影響を与える 2 つの主な要素です。この記事では、再描画とリフローの回数を減らす方法を説明し、具体的なコード例をいくつか示します。

1. 適切な CSS プロパティを使用する

CSS コードを作成するときは、再描画やリフローを引き起こすプロパティの使用を避けるようにしてください。たとえば、頻繁に変更されるスタイル属性をクラスに設定し、要素のスタイルを直接変更する代わりに、JavaScript を使用してクラスを切り替えることができます。これにより、再描画とリフローの回数が減ります。

例:

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

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

2. イベント委任を使用する

イベントを処理するときは、イベント委任を使用してイベント バインディングの数を減らすようにしてください。イベントを親要素にバインドし、イベントのターゲットに応じてそれを処理します。これにより、多数のイベント バインディングを回避し、リフローの数を減らすことができます。

例:

<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. DOM のバッチ変更

DOM 要素を複数回変更する必要がある場合は、DocumentFragment を使用するか、変更を試みる必要があります。 DOM 要素をドキュメント フローから削除し、変更が完了したら再度挿入します。これにより、頻繁なリフロー プロセスが回避され、パフォーマンスが向上します。

例:

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. JavaScript アニメーションの代わりに CSS アニメーションを使用する

要素をアニメーション化する必要がある場合は、JavaScript アニメーションの代わりに CSS アニメーションを使用してみてください。 。 CSS アニメーションは GPU アクセラレーションを利用してパフォーマンスを向上させ、再描画とリフローの回数を減らすことができます。

例:

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

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

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

5. スロットル機能または手ぶれ補正機能を使用する

イベントが頻繁にトリガーされる場合、スロットル機能または手ぶれ補正機能を使用できます。機能 イベントのトリガー頻度を制御し、リフローの数を削減します。スロットル関数は関数を定期的に実行しますが、デバウンス関数は最後のトリガーからしばらくしてから関数を実行します。

例:

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));

Web ページのパフォーマンスを最適化し、再描画とリフローの回数を減らすことで、Web ページの読み込み速度とユーザー エクスペリエンスを向上させることができます。上記は一般的に使用される最適化手法とコード例です。 Web ページのパフォーマンスの最適化に重点を置き続けることは、継続的な学習と改善のプロセスであることを忘れないでください。

以上がWeb ページの再描画とリフローの数を減らす: Web ページのパフォーマンスを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。