1.ドキュメント上の頻繁なDOM操作を直接避けてください。本当に必要な場合は、オフドキュメントメソッドを使用できます。具体的な方法には、以下を完全に含めることは含まれませんが、
(1)。最初にドキュメントから要素を削除し、変更を完了したら、要素を元の位置に戻します
(2)。要素の表示を「なし」に設定し、変更を完了した後、ディスプレイを元の値に変更します
(3)。複数のDOMノードを作成する必要がある場合は、DocumentFragmentを使用してドキュメントを作成してドキュメントを作成した後、ドキュメントを追加することができます。
2。スタイルを中心に変更します
(1)。要素スタイルの属性をできるだけ少なく変更する
(2)。クラス名を変更して、スタイルを変更してみてください
(3)。 CSSTextプロパティを介してスタイル値を設定します
3.キャッシュレイアウト属性値
レイアウト属性(数値タイプ)の非参照タイプの値の場合、複数のアクセスが必要な場合、最初にローカル変数に1つのアクセスに保存でき、次にローカル変数を使用できます。
var width = el.offsetwidth; var scrollleft = el.scrollleft;
4.要素の位置を絶対または固定に設定します
要素の位置が静的で相対的な場合、要素はDOMツリー構造にあります。要素の操作を再レンダリングする必要がある場合、ブラウザはページ全体をレンダリングします。要素の位置を絶対および固定に設定すると、要素がDOMツリー構造とは分離され、ブラウザがレンダリングする必要がある場合にのみ要素と要素を要素の下にレンダリングする必要があるため、ブラウザをある程度削減する必要があります。
上記は、ブラウザのリフローと塗り直しを減らすことについて私が要約した問題のいくつかです。みんなが気に入ってくれることを願っています。