コンセプト
再配置：DOMの変更が、要素の幅や高さ、または要素の位置の変更など、要素の幾何学的プロパティの変更を引き起こし、ブラウザが要素の幾何学的プロパティを再計算してレンダリングツリーを再構築しなければならなくなる場合、このプロセスは「再配置」と呼ばれます。
再描画：再配置が完了した後、再構築されたレンダー・ツリーをスクリーンにレンダリングするプロセスを「再描画」と呼びます。
注：再配置は確実に再描画の引き金になりますが、再描画は必ずしも***再配置にはなりません。
II. 再配置と再抽選が行われる場合
再配置：
- 可視 DOM 要素の追加と削除
- エレメントの位置の変化
- 要素のサイズが変わります
- コンテンツの変更
- を初期化するページレンダラ。
- ブラウザのウィンドウサイズの変更
再描画します：
- 要素の目に見える外観は変更するが、レイアウトには影響を与えない場合。例えば、DOM要素の文字色だけを変更する場合。
III.再配置と再描画を減らす方法
再描画と並べ替えの処理は、どちらもウェブアプリケーションの UI が応答しなくなる原因となるコストのかかる処理なので、この種の処理はできるだけ最小限に抑えるべきです。
- DOMとスタイルに対する複数の変更をマージ
- 何度も再配置される要素をabsoluteまたはfixedに設定することで、その要素がドキュメントの流れから外れ、アニメーション効果のある要素など、その変更が他の要素に影響しないようにします。
- display属性がnoneである要素はレンダー・ツリーに存在しないため、非表示要素に対する操作が他の要素の並び替えのトリガーになることはありません。ある要素に対して複雑な操作を行いたい場合は、まずその要素を非表示にし、操作の完了後に表示することで、非表示時と表示時の2つの並べ替えをトリガーするだけです。
- 頻繁に取得する必要があり、ブラウザがそれらを並べ替える原因となるプロパティ値の場合、それらを変数
- イメージを読み込んだときの幅と高さを設定します。
