JavaScriptのリフロー（リフロー）と再描画に関する知識の紹介（コード例）

この記事は、JavaScript でのリフロー (リフロー) と再描画に関する知識 (コード例) を提供します。一定の参考価値があります。必要な友人は参照できます。役立つことを願っています。役に立ちます。

# ブラウザのレンダリング プロセスを簡単に理解しましょう (画像はインターネットからのものです)

##ブラウザがレンダリング ツリーを生成するプロセス(画像はインターネットから取得)

リフロー

リフローの一部である場合要素のサイズ、レイアウト、非表示などが変更されると、ブラウザは DOM の一部または DOM 全体を再レンダリングするため、レンダー ツリーまたはすべてを選択します。リフローはリフローとも呼ばれますが、文字通りリフロー（ページ全体をリフローすること）の方がわかりやすいです。

再描画

ページ要素のスタイルの変更がドキュメント フロー内の要素の位置 (背景色、境界線の色、可視性など) に影響しない場合、ブラウザは新しいスタイルを割り当てるだけです。 style要素を追加して再描画します。

リフローまたは再描画はいつトリガーされますか?

リフローを引き起こす可能性のあるユーザーの行動や潜在的な DHTML 変更は数多くあります。たとえば、ブラウザ ウィンドウのサイズを変更したり、スタイルの計算、DOM への要素の追加または削除、要素のクラスの変更などの JavaScript メソッドを使用したりします。

表示される DOM 要素の追加または削除;

要素の位置の変更;
要素のサイズの変更 - マージン、パディング、ボーダー、幅、高さ;
コンテンツの変更 (ユーザーが Enter を入力したときなど)ボックス内のテキスト、およびテキストまたは画像のサイズの変更によって計算された値の幅と高さが変化する;
ページ レンダリングの初期化;
ブラウザ ウィンドウのサイズが変更され、サイズ変更イベントが発生した場合;
offsetWidth および offsetHeight プロパティ;
style 属性の値を設定します;

リフローでは確実に再描画が発生しますが、再描画によって必ずしもリフローが発生するとは限りません。

リフローと再描画を減らすにはどうすればよいですか?

1. CSS でのリフローと再描画を避ける

1. DOM ツリーの最後にあるクラスをできる限り変更します

2. インライン スタイルの複数のレイヤーの設定を避ける
3. アニメーション効果は、位置属性が絶対または固定である要素に適用されます##4. テーブル レイアウトの使用を避ける##5. CSS3 ハードウェア アクセラレーションを使用して、変換、不透明度、フィルターなどのアニメーション効果によってリフローが発生しないようにします。 redraw

2. リフローと再描画を回避するための JS 操作

1. JS を使用して 1 つのスタイルを変更してから次のスタイルを変更することは避けてください。CSS スタイルを一度に変更することをお勧めします。スタイル リストをクラス Name

2 として定義します。頻繁な DOM 操作を避け、ドキュメントのフラグメントを使用してサブツリーを作成し、それをドキュメントにコピーします

3。最初に要素を非表示にし、変更してから要素を表示しますなぜなら、display:none での DOM 操作はリフローや再描画をトリガーしないためです。

4. offsetLeft などの属性を読み取るループを避け、ループする前に保存してください。
5. 複雑なアニメーション効果の場合は、絶対位置を使用してそれらを分離します。そうしないと、親の多数のリフロー要素とそれに続く要素が発生します。

概要:

リフローはブラウザーでのユーザー主導の操作であるため、ドキュメント フローを改善する方法を知ってください。リフロー時間を把握し、リフロー時間に対するさまざまなドキュメント属性 (DOM ノードの深さ、CSS レンダリング効率、さまざまなスタイルの変更の影響) を知ることは、フロントエンド開発に非常に役立ちます。単一の要素をリフローする場合でも、その親要素と後続の要素もリフローする必要がある場合があります。たとえば、要素の背景を変更する必要がある場合、これには要素の属性は関係しないため、再描画のみが行われます。

以上がJavaScriptのリフロー（リフロー）と再描画に関する知識の紹介（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。