Web ページのパフォーマンスの最適化: リフローと再描画の影響とその対処方法

Web ページのパフォーマンスと最適化方法に対するリフローと再描画の影響

ブラウザで Web ページを開くとき、Web ページのレンダリング プロセスは次のようになります。 HTML の解析、DOM ツリーの構築、CSSOM ツリーの構築、DOM と CSSOM ツリーのマージ、レンダリング ツリーの生成、最後にレンダリング ツリーに従ってページのレイアウトと描画の 4 つのステージに分かれています。このレンダリング プロセスでは、リフローと再ペイントが 2 つの非常に重要な概念です。

リフローとは、DOM 要素のサイズ、位置、コンテンツが変更されたときに、ブラウザーがページ内の要素の幾何学的プロパティを再計算し、ページを再レイアウトするプロセスを指します。再描画とは、要素のスタイルが変更されても、ページ上の幾何学的プロパティには影響しない場合、ブラウザーは再レイアウトせずに要素を再描画するだけで済むことを意味します。

ブラウザはリフロー プロセス中に要素の幾何学的属性を再計算し、ページを再レイアウトする必要があるため、リフローと再描画が頻繁に発生すると、ページのパフォーマンスに大きな影響を与えます。消費量が非常に多いパフォーマンスです。同様に、再描画もページのパフォーマンスに影響を及ぼし、リフローよりもコストは低くなりますが、それでも一定のリソースを消費します。

Web ページのパフォーマンスを最適化するには、リフローと再描画の回数をできる限り減らす必要があります。いくつかの最適化方法を次に示します。

1. スタイルの一元化を使用する: 特定の DOM 要素のスタイルを変更するすべての操作を一元化し、それらをまとめて実行することで、複数のスタイル変更によって引き起こされる複数のリフローや再描画を回避します。たとえば、CSS クラスを使用すると、複数の要素のスタイルを 1 つずつ変更するのではなく、一度に変更できます。
2. ドキュメント フラグメントを使用する: DOM に多数のノードを挿入する必要がある場合、ドキュメント フラグメント (ドキュメント フラグメント) を使用して、最初にこれらのノードをドキュメント フラグメントに挿入し、次にドキュメント フラグメントを挿入できます。これにより、リフローと再描画の回数を減らすことができます。
3. スタイルをバッチ操作として設定します: 要素の style 属性を変更してスタイルを変更すると、リフローと再描画が発生するため、要素の classList を変更して、スタイルの変更操作をまとめて集中することをお勧めします。 、className または style 属性を使用すると、スタイルを 1 つずつ変更するのではなく、バッチで操作できます。
4. 強制同期レイアウト属性の使用を避ける: offsetLeft、offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollLeft およびその他の属性など、特定の属性を読み取るとブラウザに同期レイアウトの実行が強制され、リフローが発生します。要素のスタイルを頻繁に変更する場合は、可能な限り、これらのプロパティを繰り返し読み取らないようにしてください。
5. 変換属性と不透明度属性を使用します。変換属性と不透明度属性はリフローを引き起こさず、再描画のみを引き起こします。したがって、要素の位置、サイズ、その他の属性を変更する場合は、これら 2 つの属性を使用するようにしてください。
6. スロットリング機能と手ぶれ補正機能を使用する: ブラウザーのウィンドウ サイズの変更、スクロール、その他のイベントを監視する場合は、スロットリング機能と手ぶれ補正機能を使用して、リフローと再描画の数を制限し、頻繁なトリガーを回避します。

次に、いくつかの具体的なコード例を示します。

// 使用样式集中化
document.getElementById('elementId').classList.add('new-class');

// 使用文档片段
var fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
  var div = document.createElement('div');
  div.textContent = 'This is a div';
  fragment.appendChild(div);
}
document.getElementById('container').appendChild(fragment);

// 批量操作样式
var elements = document.getElementsByClassName('elements');
for (var i = 0; i < elements.length; i++) {
  elements[i].classList.add('new-class');
}

// 避免强制同步布局属性
var width = element.offsetWidth; // 读取元素的宽度

// 使用transform和opacity属性
element.style.transform = 'translateX(100px)';
element.style.opacity = 0.5;

// 使用节流函数
function throttle(fn, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

window.addEventListener('resize', throttle(function() {
  // 窗口大小变化时的处理逻辑
}, 200));

上記の最適化方法を採用することにより、リフローと再描画の数を減らすことができ、それによってパフォーマンスとユーザー エクスペリエンスを向上させることができます。ウェブページ。同時に、開発プロセス中は、要素のスタイルやレイアウトを頻繁に変更することを避け、不必要なリフローや再描画のトリガーを最小限に抑えることにも注意を払う必要があります。

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