JavaScript でのリフローと再ペイント

特に大規模なアプリケーションにおいて、不必要なリフローや再描画を減らすために CSS を最適化するためのベスト プラクティスは何ですか?

1. リフロー (レイアウトの再計算):

リフロー (レイアウト または 再レイアウト とも呼ばれます) は、ブラウザーがページ上の要素の位置、サイズ、レイアウトを再計算するときに発生します。このプロセスは、要素の追加、削除、サイズ変更、表示設定の変更など、ページのレイアウトが変更されるたびに実行されます。より複雑で時間のかかる操作です

例 ：

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
const box = document.getElementById('box');
// Triggering a reflow by changing width and height
box.style.width = '200px';
box.style.height = '200px';

// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

リフローはいつ起こるのでしょうか?

• DOM 要素の追加、削除、または変更 (appendChild、removeChild など)。
• 幅、高さ、マージン、パディングなどの CSS スタイルを調整してレイアウトを変更します。
• ウィンドウのサイズ変更または要素のサイズの変更。
• フォント サイズまたはフォントのプロパティを変更します。
• offsetWidth、offsetHeight、scrollTop、getBoundingClientRect() などのメソッドを使用すると、ブラウザにレイアウトの再計算が強制されるためです。

リフローの仕組み:

ページのレイアウトに影響する何かを変更する場合、ブラウザは次のことを行う必要があります:

1. 変更の影響を受けるすべての要素の位置と寸法を再計算します。
2. レイアウト ツリーを再構築します。これは要素のレイアウト方法の内部表現です。

1 つの変更によって多くの要素が影響を受ける場合、リフローにコストがかかり、サイトのパフォーマンスが低下する可能性があります。

2.再描画 (ビジュアルアップデート)

再描画 (または 再描画) は、要素の視覚的なプロパティは変更されるが、レイアウトは変更されない場合に発生します。要素の位置やレイアウトを再計算せずに要素の外観を更新するだけで済むため、リフローよりもコストが低くなります。再描画は、レイアウトが再計算された後 (両方が必要な場合)、または色や可視性など、レイアウトに影響しないプロパティが変更されたときに行われます。

例 ：

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

再塗装はいつ行われますか?

• 背景色、境界線の色、または可視性のプロパティを変更します。
• 要素のボックスの影、輪郭、または色の変更。
• 不透明度 (opacity)、変換 (transform)、または Z インデックスを更新しています。

再描画にはレイアウトの再計算が含まれないため、リフローよりも高速ですが、それでもページの一部を再描画する必要があるため、時間がかかります。

レンダリング パイプライン

1. DOM 構築: ブラウザは HTML を解析して DOM (ドキュメント オブジェクト モデル) ツリーを構築します。
2. CSSOM 構築: CSS は解析されて CSSOM (CSS オブジェクト モデル) ツリーを構築します。
3. レンダー ツリーの構築: DOM と CSSOM を組み合わせて レンダー ツリー を作成します。これには、表示される各要素の視覚情報が含まれます。
4. レイアウト (リフロー): ブラウザは、レンダー ツリー内の各表示要素の位置とサイズを計算します。
5. ペイント: ブラウザは、色、境界線、影などの視覚的プロパティに基づいてピクセルを塗りつぶします。
6. 合成: ブラウザは、ペイントされたさまざまなレイヤー (アニメーション、3D 変換などの複雑な要素用) を合成し、画面上に表示します。

パフォーマンスへの影響

• リフロー: 特にページの大部分に影響を与える場合、または繰り返しトリガーされる場合 (ループまたはサイズ変更時など)、パフォーマンスの点でコストがかかります。これはページのレイアウトに影響し、要素の位置とサイズを再計算する必要があります。
• 再ペイント: リフローよりも低コストですが、特に多くの要素を頻繁に再ペイントする必要がある場合はパフォーマンスに影響します。

リフローと再ペイントを最適化する方法

1. DOM 操作を最小限に抑える : DOM 更新のバッチ処理 (前述) や DocumentFragment などのテクニックを使用して、複数の変更を一度に行うのではなく、一つ一つ。

2. レイアウト スラッシングを避ける : レイアウト プロパティ (offsetHeight など) を読み取り、同じサイクルですぐに書き込む (レイアウトを変更する) と、レイアウト スラッシングとして知られるリフローが強制されます。これを回避するには、DOM プロパティの読み取りと書き込みを別の手順で分離します。
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   const box = document.getElementById('box');
   // Triggering a reflow by changing width and height
   box.style.width = '200px';
   box.style.height = '200px';
   
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

   ログイン後にコピー

   ログイン後にコピー

3. CSS クラスを使用する : 個々のスタイルを変更する代わりに、CSS クラスを使用して変更を加えます。ブラウザはクラス切り替えをより効率的に処理します。
   

   <div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
   
   <script>
   // Triggering a repaint by changing the background color
   box.style.backgroundColor = 'red';
   </script>
   

   ログイン後にコピー

   ログイン後にコピー

4. CSS の複雑さを軽減します: リフローを引き起こす可能性のある、深くネストされた要素や過度に複雑な CSS ルールを避けます。

5. レイアウトに影響を与えずに要素を非表示にするだけの場合は、display: none の代わりに Visibility: hidden を使用します。 display: none はリフローをトリガーしますが、visibility: hidden は再ペイントのみをトリガーします。

結論

• リフローにはページのレイアウトの再計算が含まれ、パフォーマンスの点でコストが高くなります。
• 再ペイントは、レイアウトに影響を与えることなく外観を更新し、コストが低くなります。
• 両方を最小限に抑えると、サイトの応答性と高速性が維持され、ユーザー エクスペリエンスが向上します。

以上がJavaScript でのリフローと再ペイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。