リフローと再描画のパフォーマンスを向上させる方法

リフローと再描画のパフォーマンスを最適化する方法には、特定のコード例が必要です

リフローと再描画は、Web ページのパフォーマンスの最適化における重要な概念です。リフローはブラウザがページ レイアウトを計算して再レンダリングするプロセスを指します。一方、再描画は画面上にすでに存在する要素を再描画することです。これら 2 つのプロセスは Web ページのパフォーマンスに重要な影響を与えるため、リフローと再描画のパフォーマンスを最適化することが非常に重要です。この記事では、リフローと再描画を最適化するいくつかの方法と具体的なコード例を紹介します。

1. スタイル属性の頻繁な操作を避ける

スタイル属性を頻繁に操作すると、リフローと再描画が頻繁に発生します。これを回避するには、CSS クラスを使用してスタイルを設定し、JavaScript 経由でクラスを切り替えることができます。これによりスタイル変更の回数が減り、リフローや再描画が減ります。

// 不推荐的写法
document.getElementById('element').style.width = '100px';
document.getElementById('element').style.height = '100px';

// 推荐的写法
document.getElementById('element').classList.add('big-element');

2. スタイル属性のバッチ変更

複数のスタイル属性を一度に変更する必要がある場合は、それらを変更するのではなく、1 つのコード ブロックに入れるようにしてください。複数回。これにより、リフローと再描画の回数が減ります。

// 不推荐的写法
document.getElementById('element').style.width = '100px';
document.getElementById('element').style.height = '100px';

// 推荐的写法
document.getElementById('element').style.cssText = 'width: 100px; height: 100px;';

3. CSS3 アニメーションの使用

CSS3 アニメーションではブラウザのハードウェア アクセラレーションを利用できるため、リフローと再描画のオーバーヘッドが軽減されます。最新のブラウザのほとんどは CSS3 アニメーションを最適化しているため、JavaScript アニメーションよりもパフォーマンスが優れています。

.element {
  transition: width 0.5s ease;
}

/* 通过 JavaScript 修改宽度 */
document.getElementById('element').style.width = '100px';

4. 仮想 DOM を使用する

仮想 DOM は、計算と比較を効率的に実行し、変更された部分を実際の DOM に更新できるメモリ内のデータ構造です。これにより、リフローと再描画の回数が減ります。

仮想 DOM は、ライブラリやフレームワークとともに使用されることがよくあります。React を使用したサンプル コードを次に示します。

// 不推荐的写法
ReactDOM.render(
  <div>
    <span>Hello</span>
    <span>World</span>
  </div>,
  document.getElementById('container')
);

// 推荐的写法
ReactDOM.render(
  <div>
    <span>Hello</span>
    <span>World</span>
  </div>,
  document.getElementById('container')
);

5. 個別の多層レイヤーの使用

# #Separatingページのさまざまな要素を独立したレイヤーに配置すると、リフローと再描画の範囲を減らすことができます。

transform または will-change 属性を使用して、要素を別のレイヤーに配置することでレンダリングのパフォーマンスを向上させます。

/* 创建独立图层 */
.element {
  will-change: transform;
  /* 或者使用 transform 属性 */
  transform: translateZ(0);
}

要約すると、リフローと再描画のパフォーマンスの最適化は非常に重要です。スタイル属性の頻繁な操作、スタイル属性のバッチ変更、CSS3 アニメーションの使用、仮想 DOM の使用、個別のマルチレイヤー レイヤーの使用を回避することで、リフローと再描画の回数を効果的に削減でき、Web のパフォーマンスとユーザー エクスペリエンスが向上します。ページです。

(この記事では、いくつかの一般的な最適化方法とコード例のみを提供します。実際の最適化プロセスは、特定の状況に応じて包括的に検討し、調整する必要があります)

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