ブラウザにおける再描画とリフローの概念分析

この記事の内容はブラウザでの再描画とリフローの概念分析に関するものです。必要な方は参考にしていただければ幸いです。

1. レンダーツリー
1. ブラウザは、取得した HTML コードを DOM ツリーに解析し、ルート ノードは DOM ツリー内のノードです。 DOM ツリーには、display:none の非表示を含むすべての HTML タグと、JS などで動的に追加された要素が含まれています。たとえば、IE では -moz で始まるスタイルが削除され、Firefox では

3 で始まるスタイルが削除されます。レンダー ツリーは DOM ツリーに似ていますが、その違いは非常に大きく、レンダー ツリーの各ノードは独自のスタイルを持ち、レンダー ツリーには非表示のノードが含まれません。これらのノードはレンダリングに使用されず、レンダリングに影響を与えないためです。

2. 再描画とリフローの定義

再描画
: 現在の要素のスタイル (背景色、フォント色など) が変更された場合、変更された要素を再レンダリングするだけで済みます。描画はブラウザのパフォーマンスにほとんど影響しないため、通常は考慮されません。

再描画が発生した場合

: コンテナの外観スタイルを変更します(背景:黒など)。外観を変更してもレイアウトは変更されず、他の DOM には影響しません。

リフロー

: ドキュメントの一部または全体を再レンダリングするために、ブラウザがドキュメント内の要素の位置と幾何学的構造を再計算するプロセスを指します。 リフローにより DOM ツリー全体が再構築される可能性があるため、パフォーマンスが大幅に低下します
1 つの要素のリフローにより、後続のすべての子要素と DOM 内のそのすぐ後の祖先要素のリフローが発生します。

3. リフローをトリガーする操作

1. ウィンドウのサイズ変更
2. スタイルシートの追加または削除

4. 入力ボックスにテキストを入力するなど、コンテンツの変更ユーザーが入力ボックスにテキストを入力するなど)

5. 次のような CSS 疑似クラスをアクティブ化します。 hover (IE の兄弟ノード疑似クラスのアクティブ化) (:hover などの CSS 疑似クラスのアクティブ化 (IE では兄弟の疑似クラスのアクティブ化)

6. クラス属性の操作 (クラス属性の操作)

7. DOM を操作するスクリプト)

8. offsetWidth プロパティと offsetHeight プロパティの計算 (offsetWidth と offsetHeight の計算)

9. style属性のプロパティを設定する (style属性のプロパティを設定する)

10. スクロールバーをドラッグすると固定配置の要素が移動します

リフローを回避する方法

1.要素のスタイルを変更したい場合、複数回変更する代わりに、すべてのスタイルを 1 つのクラスに集中させて一度変更することができます

2. アニメーション効果には絶対を使用してください 3. テーブル レイアウトの使用は避けてください4. CSS 式は使用しないでください
5. 最後に要素を変更します
6. アニメーションを動かすときは、コントロールが必要です
たとえば、要素をドラッグするときに、x または y 座標を 5px 変更しますが、これにより滑らかさが低下します。パフォーマンスが向上します
7. アニメーション効果などの複雑なパフォーマンスを変更したい場合は、offsetWidth の計算も発生するため、このフロー ラインの外側で、position-absolute または Position-fixed を使用してください。変数を使用して保存します
9. ドキュメントにノードを追加する必要がある場合、DOM に新しい要素を追加するときに、ドキュメントの断片化を使用して、最初にそれらをコンテナに追加してから均一に追加します。リフローが 1 つだけ生成されること

関連する推奨事項:

js で自己実行関数を呼び出す 2 つの方法

js のローカル オブジェクト、組み込みオブジェクト、ホスト オブジェクトの分析概要

以上がブラウザにおける再描画とリフローの概念分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。