ブラウザのリフローと repaint_javascript のトリックを減らす方法

1. ドキュメント での頻繁な DOM 操作を避けます。必要に応じて、次のような特定のメソッドを使用できます。

(1)。まずドキュメントから要素を削除し、変更が完了したら要素を元の位置に戻します。
(2) 要素の表示を「なし」に設定し、変更が完了したら元の値に戻します
(3). 複数の DOM ノードを作成する必要がある場合は、DocumentFragment を使用して作成し、一度に document

に追加できます。

2. スタイルを一元的に変更します

(1) 要素スタイルの属性の変更は最小限に抑えます
(2) className
を変更してスタイルを変更してみます。 (3) cssText 属性

を通じてスタイル値を設定します。

3. レイアウト属性値のキャッシュ

Layout属性の非参照型の値(数値型)については、複数回アクセスする必要がある場合、一度のアクセス時にローカル変数に格納してから、そのローカル変数を使用することができます。ブラウザーのレンダリングを引き起こすたびに属性を読み取ることを避けます。
var width = el.offsetWidth;

4. 要素の位置を絶対または固定に設定します

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

上記は、ブラウザのリフローと再描画の削減について私が個人的にまとめたものです。皆さんに気に入っていただければ幸いです。