ブラウザのリフローと再ペイントを削減する_html/css_WEB-ITnose

1. 必要に応じて、ドキュメント外のメソッドを使用することができます: まず、要素を削除します。要素の表示を「なし」に設定し、修正が完了したら元の位置に戻します(3)。複数の DOM ノードを作成する必要がある場合は、DocumentFragment を使用して作成し、一度にドキュメントに追加します 2. スタイルを集中的に変更します
(1) 要素スタイルの属性をできるだけ変更しません
(2)。 className を変更してスタイルを変更してみます
(3) cssText 属性を通じてスタイル値を設定します
Layout 属性の非参照型値の場合、複数回アクセスする必要がある場合は、最初に 1 回のアクセスで保存できます。 ローカル変数では、属性が読み取られるたびにブラウザーがレンダリングされるのを避けるために、ローカル変数が後で使用されます。 var width = el.offsetWidth; varscrollLeft = el.scrollLeft;

4. 要素の位置を絶対または固定に設定します
要素の位置が静的または相対的な場合、要素は DOM ツリー構造内にあります。操作で再レンダリングが必要な場合、ブラウザはページ全体をレンダリングします。要素の位置を絶対および固定に設定すると、要素が DOM ツリー構造から独立して存在するようになり、ブラウザーはレンダリングが必要なときにその要素とその下の要素のみをレンダリングするだけで済むため、時間をある程度短縮できます。ブラウザのレンダリング時間。JavaScript アニメーションの数が増加している現在、特に考慮する価値があります。