リペイントとリフローの概要とその最適化方法

再描画とリフローは、ブラウザがページをレンダリングするときの 2 つの重要なプロセスです。

再描画:
- 再描画とは、要素のスタイルが変更されてもレイアウトには影響しない場合に、ブラウザーがこれらの要素を再描画することを意味します。
- たとえば、色や背景などの属性を変更しても、ページレイアウトは変更されませんが、再描画がトリガーされるだけです。
- 再描画は、影響を受けた部分を再描画するだけなので比較的安価です。
リフロー:
- リフローとは、ページレイアウトが変更されると、ブラウザーが要素の幾何学的プロパティを再計算し、ページレイアウトツリー (レイアウトツリー) を再構築することを意味します。
- 要素のサイズや位置の変更、要素の追加または削除などの操作により、リフローが発生します。
- リフローはページ全体のリフローをトリガーし、影響を受ける他の要素もリフローおよび再描画されるため、比較的コストがかかります。

再描画とリフローを最適化する方法:

DOM へのアクセスを減らす: DOM への複数のアクセスと変更により、複数のリフローと再描画が発生します。複数の操作を 1 つの操作に結合して、DOM への直接アクセスを減らすことができます。
スタイルをバッチで変更する: クラス名を追加するか、要素のスタイル属性を変更することにより、複数のスタイルの変更を 1 つの操作に結合します。
ドキュメントフラグメントの使用 (DocumentFragment): ドキュメントフラグメントを使用して複数の DOM 操作を実行し、それらをドキュメントに一度に追加して、リフローの回数を減らします。
頻繁な操作が必要な要素については、まずドキュメントフローから要素を削除し (表示: なし)、操作の完了後に要素をドキュメントに再挿入します。
レイアウトへの影響を軽減するには、JavaScript 操作の代わりに CSS3 アニメーションとトランジションを使用します。
変換と不透明度を使用してアニメーション効果を実現すると、GPU アクセラレーションが有効になり、リフローと再描画が軽減されます。
offsetTop、offsetLeft、clientWidth など、リフローの原因となるプロパティ値を頻繁に読み取ることは避けてください。

つまり、再描画とリフローを最適化する鍵は、DOM での操作を減らし、スタイルの変更をバッチ処理するように努め、リフローと再描画が頻繁にトリガーされるのを避けることです。これにより、ページのパフォーマンスとユーザーエクスペリエンスが向上します。