並べ替えと描き直しを理解する

前言
ブラウザでページのすべての内容をダウンロードしました。HTML、JavaScript、CSS、画像――後で二つの内部データ構造を解析して生成します。

DOMツリー：ページ構造

を表します。

レンダリングツリー：DOMノードが

をどう表示するかを示す。
DOMツリーのそれぞれの表示が必要なノードは、レンダリングツリーの中に少なくとも1つの対応するノードが存在する（レンダリングツリーに対応するノードがない）。レンダリングツリー中のノードは「フレーム」または「ボックス」と呼ばれ、ページ要素はパディング、エッジ、フレーム、位置を有するボックスと理解される。DOMツリーとレンダリングツリーの構築が完了すると、ブラウザはページ要素の表示を開始します。
DOMの変化が要素の幾何学的性質（例えば、幅と高さ）に影響を及ぼす場合――ブラウザは要素の幾何学的特性を再計算する必要があり、他の要素の幾何学的性質と位置もそのために影響を受ける。ブラウザは、レンダリングツリーの影響を受けた部分を無効にし、レンダリングツリーを再構成します。この過程を並べ替えといいます。再配置が完了すると、ブラウザは影響を受けた部分を画面に再描画します。このプロセスをリピートといいます。
再描画および再配置は高価なオペレーションであり、ウェブアプリケーションのUI反応が鈍くなるので、このようなプロセスの発生をできるだけ減らすべきである。
並べ替えの原因

は、可視DOM要素

を追加または削除する。

元素位置が

に変更されました。

元素サイズ変更

コンテンツ変更（例えば、テキスト変更または画像は他の異なるサイズのピクチャによって代替される）

ページレンダリング初期化

ブラウザのウィンドウサイズが

に変更されました。
レンダリングツリーの変更の行列と更新
再配置のたびに計算の消費が発生するため、大部分のブラウザはキューの変更とバッチの実行によって再配置プロセスを最適化する（複数の並べ替えプロセスを1回に統合する）。しかし、いくつかの操作は、キューを強制的に更新し、キューの並べ替えをすぐに実行する必要があります（これにより、ブラウザの最適化ポリシーが無効になります）。

でレイアウト情報を取得する操作は、ブラウザがレンダリング・キューの「処理待ちの変化」を実行し、正しい値を返すために再配列をトリガするように強制的にキューを更新することをもたらす。

offset Top，offset Left，offset Width，offset Height

scrollTop、scrollLeft、scrollwidth、scrollHeight

clientTop、clientLeft、client Width、clientHeight

get ComputatidStyle()

最適化方法：レイアウト情報の変更時に照会しないようにしてください。レイアウト情報の変更が終わったら、

に問い合わせてもいいです。
再描画と再配置を最小化する
再描画と再配置のコストは非常に高いので、プログラムの応答速度を向上させるための良い戦略は、このような動作の発生を低減することである。発生回数を減らすためには、DOMと様式の修正を複数回統合して一度に処理するべきです。
複数のスタイルの変更をマージします。

var el = document.getElementById('myDiv')
el.style.borderLeft = '1px'
el.style.borderRight = '2px'
el.style.padding = '5px'

上記の例では、2つの問題があります。

各スタイルの属性の変化は要素の集合構造に影響します。最悪の場合、ブラウザが三回の並べ替えをトリガすることになります。

上のコードは4回のDOM

を訪問しました。
最適化方法：cssText属性を使用して、すべての変更をまとめてから一回処理します。

var el = document.getElementById('myDiv')
el.style.cssText +='border-left: 1px; border-right: 2px; padding: 5px;';

一括修正DOM
DOM要素に対して一連の操作が必要な場合は、以下の手順により、再描画と並び替えの回数を減らすことができる。
1.要素をドキュメントから逸脱させる
2.列の操作を行います。
3.元素をドキュメントに持ち帰る

により、要素を文書の流れから離脱させる方法：

は要素を隠して、修正を加えて、再び

を表示します。

Dcument fragmentを使用して、現在のDOMの外にサブツリーを構築し、それをドキュメント

にコピーする。

は、要素要素を別のドキュメントから離れるノードにコピーし、コピーを修正し、完成したら元の要素を置換する。

キャッシュレイアウト情報
上記の説明では、ブラウザはキューの変更と一括実行によって並べ替え回数を減らすと述べました。しかし、レイアウト情報を検索すると（オフセット量、スクロール位置、計算されたスタイル値を取得する場合）、ブラウザは最新の値を返すためにキューを更新し、すべての変更を適用します。したがって、レイアウト情報の取得回数をできるだけ減らして、取得した後、局所変数にコピーしてから、ローカル変数を操作するのが一番いいです。
IEと：ホーバー
大量の元素の上で使うことを免れます：hoverこの効果。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。