リフローとリドローとは何ですか

リフローとは、ページのレイアウトが変更されたときに、ブラウザがレンダリング ツリー内の要素の位置とサイズを再計算する必要があることを意味します。このプロセスには、レンダリング ツリーの走査、各要素の幾何学的プロパティの計算、リフローはブラウザにページ全体の再レイアウトを引き起こすため、非常にパフォーマンスを消費する操作です。再描画とは、ページのスタイルが変更されたときに、ブラウザが影響を受ける要素を再描画する必要があることを意味します。再描画にはレイアウトの計算は含まれません。要素の外観を再描画するだけで済みます。リフローと比較すると、再描画のパフォーマンスはオーバーヘッドが少なくなります。

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

リフローと再描画は、Web ページのパフォーマンスの最適化において非常に重要な概念です。これら 2 つの概念を理解する前に、まずブラウザーがページをレンダリングするプロセスを理解する必要があります。

ブラウザは Web ページを読み込むと、HTML ドキュメントを解析して DOM ツリーにし、次に CSS スタイルを解析して CSSOM ツリーにします。次に、ブラウザは DOM ツリーと CSSOM ツリーをマージしてレンダー ツリー (レンダー ツリー) を作成します。最後に、ブラウザはレンダリング ツリーに従ってページをレイアウトし、描画します。

リフローとは、ページのレイアウトが変更されたときに、ブラウザーがレンダリング ツリー内の要素の位置とサイズを再計算する必要があることを意味します。このプロセスには、レンダー ツリーの走査、各要素の幾何学的プロパティの計算、およびレイアウトの更新が含まれます。リフローは、ブラウザーにページ全体の再レイアウトをトリガーするため、非常にパフォーマンスを重視する操作です。

再ペイントとは、ページのスタイルが変更されたときに、ブラウザーが影響を受ける要素を再描画する必要があることを意味します。再描画にはレイアウトの計算は含まれません。要素の外観を再描画するだけで済みます。リフローと比較して、再描画はパフォーマンスのオーバーヘッドが少なくなります。

リフローや再描画を頻繁に行うとページのパフォーマンスが低下するため、Web 開発ではリフローや再描画の回数を最小限に抑える必要があります。以下は、リフローと再描画につながる一般的な操作の一部です:

1. 要素の幅、高さ、位置などの変更など、DOM 要素の幾何学的プロパティを変更します。

2. 要素の背景色やフォント サイズなどを変更するなど、DOM 要素のスタイルを変更します。

3. DOM 要素を追加または削除します。

4. ブラウザのウィンドウ サイズを変更します。

リフローと再描画の数を減らすために、次の最適化戦略を採用できます:

1. 要素の位置とサイズを変更する代わりに、CSS 変換属性を使用します。変換属性はリフローをトリガーせず、再描画のみをトリガーするため、パフォーマンスのオーバーヘッドは小さくなります。

2. 複数回変更する必要があるスタイル属性をまとめて変更し、DOM 要素に適用します。これにより、リフローと再描画の回数が減ります。

3. ドキュメント フラグメントを使用して、DOM 要素をバッチで追加または削除します。ドキュメント フラグメントは、複数の DOM 操作を配置できる一時的な DOM コンテナであり、ドキュメント フラグメントのコンテンツが一度にページに追加されるため、リフローの回数を減らすことができます。

4. ブラウザー ウィンドウのサイズが頻繁に変更されることを避けるために、スロットルまたはデバウンスを使用してイベント トリガーの頻度を制御できます。

つまり、リフローと再描画は、Web ページのパフォーマンスの最適化において焦点を当てる必要がある問題です。リフローと再描画の回数を減らすことで、Web ページのレンダリング パフォーマンスを向上させ、ユーザー エクスペリエンスを向上させることができます。

以上がリフローとリドローとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。