1. 基本的な考え方
1. 再配置 (再構築/リフロー/リフロー):
レンダリング ツリー内の 1 つまたは複数の要素のサイズ、レイアウト、非表示などが変更されると、レンダリング ツリーを再構築する必要があり、その結果、再配置が必要になります。
2. 再描画 (再描画または再描画):
再描画とは、要素の外観の変更によって引き起こされるブラウザの動作を指します。ブラウザは要素の新しい属性に基づいて再描画し、要素に新しい外観を与えます。再描画は、レイアウトに影響を与えることなく要素の表示外観が変更されるときに発生します。たとえば、DOM 要素のフォントの色、背景色などを変更するだけです。
2. 再スケジュールをトリガーするシナリオ
ページ レイアウトと幾何学的プロパティを変更すると、リフローがトリガーされます。
- ページの初期レンダリング (避けられないため、各ページは少なくとも 1 回リフローされます)
- 表示される DOM 要素を追加または削除する
- 要素の位置を変更するか、アニメーションを使用します
- 要素サイズの変更 - サイズ、マージン、境界線
- ブラウザのウィンドウサイズの変更
- テキストの変更や画像サイズの変更など、パディング コンテンツの変更により、計算された幅と高さが変化します。
リフローでは常に再描画が発生しますが、再描画によって必ずしもリフローが発生するとは限りません。
3.頻繁なリフローと再描画のトリガーを回避する方法:
- スタイルの頻繁な使用を避け、クラス名を変更することをお勧めします。
- 位置属性が絶対または固定である要素にアニメーション効果を適用する
- 最初に要素に display: none を設定し、操作が完了した後に表示することができます。表示属性が none の要素に対して DOM 操作が実行されると、リフローや再描画が発生しないためです。
- createDocumentFragment を使用してバッチ DOM 操作を実行する
- サイズ変更、スクロールなどの手ぶれ補正・絞り処理
- リフロー/再描画を引き起こすプロパティを頻繁に読み取ることは避けてください。本当に複数回使用する必要がある場合は、変数を使用してプロパティをキャッシュします。
- CSS3 の変換、不透明度、およびフィルターのプロパティを使用すると、GPU アクセラレーションである合成効果を実現できます。