Web ページのパフォーマンスの向上: リフローと再描画を減らすためのヒント

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

要約: Web 開発では、パフォーマンスの最適化が非常に重要です。中でも、リフローと再描画の削減は、Web ページのパフォーマンスを向上させるための重要な要素です。この記事では、リフローと再描画の原理を詳しく紹介し、開発者がリフローと再描画を減らして Web ページのパフォーマンスを向上させるのに役立つ具体的なコード例を示します。

1. リフローと再描画の原則

リフローとは、DOM 要素の幾何学的プロパティが変更されたときに、ブラウザが要素の幾何学的プロパティを再計算して再配置するプロセスを指します。ページ全体をアウトします。再描画は、スタイルが変更されたときにブラウザが要素を再描画するプロセスです。

リフローのコストは比較的高く、ブラウザがレイアウトを再計算してページを再描画することになり、ページのパフォーマンスに影響します。したがって、リフローを減らすことが重要な最適化ポイントとなります。

2. リフローと再描画を軽減する方法

1. ブラウザの開発者ツールを使用してリフローと再描画を検出します

最新のブラウザには、開発者ツールが備わっています。リフローとリドローは簡単に検出できます。開発プロセス中に、これらのツールを使用してパフォーマンスの問題を特定し、最適化できます。

2. スタイル属性の頻繁な読み取りと書き込みを避ける

JavaScript では、スタイル属性の読み取りと書き込みを頻繁に行うと、リフローと再描画が発生します。リフローと再描画を減らすために、スタイル属性の頻繁な読み取りと書き込みは可能な限り避けるべきです。要素にクラス名を追加し、要素のスタイルを一度に変更することで、スタイル属性の読み取りと書き込みを減らすことができます。

たとえば、次のコードは複数のリフローと再描画を引き起こします:

const element = document.getElementById('element');
element.style.width = '100px';
element.style.height = '200px';
element.style.backgroundColor = 'red';

一方、次のコードは 1 つのリフローと再描画のみをトリガーします:

const element = document.getElementById('element');
element.classList.add('custom-style');

3. CSS3 を使用します。 JavaScript アニメーションの代わりにアニメーションを使用

Web ページで CSS3 アニメーションを使用すると、アニメーションのパフォーマンスが向上します。CSS3 アニメーションはブラウザーの UI スレッドで実行され、JavaScript アニメーションは JavaScript スレッドで実行されるためです。 、アニメーションの頻度が高すぎると、JavaScript スレッドがブロックされ、ページのパフォーマンスに影響します。

4. 仮想 DOM ライブラリを使用する

仮想 DOM は、JavaScript オブジェクトを使用して実際の DOM の構造とプロパティを表し、それらの違いを比較することによって、JavaScript オブジェクトです。仮想 DOM と実際の DOM、最小限のリフローと再描画のためのテクニック。仮想 DOM ライブラリを使用すると、リフローと再描画の回数が効果的に削減され、ページのパフォーマンスが向上します。

5. アニメーションに requestAnimationFrame を使用する

アニメーション効果を開発するときは、setTimeout または setInterval の代わりに requestAnimationFrame を使用するようにしてください。 requestAnimationFrame はブラウザによって提供される API であり、アニメーションのパフォーマンスを最適化し、頻繁なリフローや再描画を回避できます。

3. コード例

次は、アニメーションに requestAnimationFrame を使用するコード例です:

function animate() {
  const element = document.getElementById('element');
  let position = 0;
  
  function update() {
    position += 1;
    element.style.left = position + 'px';
    
    if (position < 100) {
      requestAnimationFrame(update);
    }
  }
  
  requestAnimationFrame(update);
}

このコードは、ページを移動するたびに、ページ上の要素を移動します。要素が左から 100 ピクセルの位置に移動するまでの距離は 1 ピクセルです。

概要:

Web 開発では、パフォーマンスの最適化が非常に重要です。リフローと再描画を減らすことは、Web ページのパフォーマンスを向上させるための重要な要素です。ブラウザの開発者ツールを使用してリフローと再描画を検出し、スタイル属性の頻繁な読み取りと書き込みを回避し、JavaScript アニメーションの代わりに CSS3 アニメーションを使用し、仮想 DOM ライブラリを使用し、アニメーションに requestAnimationFrame を使用することで、リフローと再描画を効果的に削減できます。 Web ページのパフォーマンス。この記事のコード例が、開発者による Web ページのパフォーマンスの最適化とユーザー エクスペリエンスの向上に役立つことを願っています。

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