リフローとリドローの類似点、相違点、および適用可能な分野を調査します。-CSSチュートリアル-php.cn

リフローとリドローの類似点、相違点、および適用可能な分野を調査します。

王林

リリース： 2024-01-26 09:39:06

オリジナル

863 人が閲覧しました

リフローとリドローの類似点、相違点、および適用可能な分野を調査します。

リフローと再描画の詳細な説明: 違いとアプリケーションシナリオ、特定のコード例が必要です

前書き:

フロントエンド開発、リフロー（リフロー）、リペイントは共通の概念です。これらはページのレンダリングと密接に関連しており、パフォーマンスの最適化に非常に重要です。この記事では、リフローと再描画の違いとその適用シナリオについて詳しく説明し、具体的なコード例を示します。

1. リフローとは何ですか?

リフローとは、ブラウザが変更された要素を再計算して描画するプロセスを指します。要素のスタイルを変更すると (幅、高さ、位置の変更など)、ブラウザは要素とそのサブ要素の幾何学的プロパティを再計算し、ページを再レンダリングします。このプロセスは比較的パフォーマンスに負荷がかかります。

リフローでは他の要素の計算とレイアウトが発生するため、オーバーヘッドは再描画よりもはるかに大きくなります。多くの場合、ページのパフォーマンスを向上させるために、頻繁なリフローを避ける必要があります。

2.リペイントとは何ですか?

再描画とは、要素のスタイル情報に基づいてブラウザがページを再描画することを指しますが、要素の幾何学的プロパティは変更されません。要素の色、背景、および幾何学的プロパティとは関係のないその他のスタイルのみを変更する場合、ブラウザはリフローせずに再描画操作のみを実行します。

再描画のコストは、表示されている部分のみを再描画するだけで済み、他の要素のレイアウトに影響を与えないため、少なくなります。ただし、再描画が多すぎると、パフォーマンスに一定の影響が生じます。

3. リフローと再描画の違い

リフローと再描画の最大の違いは、パフォーマンスのオーバーヘッドと影響範囲です。

リフローはコストがかかります。リフローにより、ブラウザは要素を再計算してレンダリングします。影響範囲は通常、ページ全体またはページの一部です。リフロー操作が頻繁にトリガーされると、ページのレンダリングパフォーマンスが低下したり、ページがフリーズしたりすることがあります。

再描画のコストはわずかです。再描画では、スタイルが変更された要素のみが再描画され、ページの再計算やレイアウトは発生しません。したがって、再描画のオーバーヘッドは比較的小さく、ページのパフォーマンスへの影響は小さくなります。

4. リフローと再描画のアプリケーションシナリオ

リフロー操作を減らす: 開発中は、リフロー操作を頻繁にトリガーしないようにする必要があります。次の点でリフローの発生を減らすことができます:

position 属性を使用して、要素の位置を変更する上/左やその他の操作を置き換えます。代わりに、transform を使用できます。要素を移動するには、translate() を使用します。transform 属性は再描画のみをトリガーしますが、リフローはトリガーしません。
スタイル属性をループ内で操作しないでください。スタイルのバッチ変更を使用すると、リフローの回数を減らすことができます。
ページの読み込み時に要素のレイアウト情報を取得しないようにするには、非同期メソッドを使用してレイアウト情報を取得します。

具体的なコード例:

// 错误示例，频繁触发回流
for (let i = 0; i < 100; i++) {
  element.style.width = '200px';
  element.style.height = '200px';
  element.style.left = i * 10 + 'px';
}

// 正确示例，减少回流
element.style.position = 'absolute';
for (let i = 0; i < 100; i++) {
  element.style.transform = 'translateX(' + i * 10 + 'px)';
}

ログイン後にコピー

再描画操作の合理的な使用: スタイルのみが変更される場合には、再描画を使用してパフォーマンスを最適化できます。

具体的なコード例:

// 错误示例，频繁触发回流
for (let i = 0; i < 100; i++) {
  element.style.backgroundColor = 'red';
}

// 正确示例，只触发重绘
for (let i = 0; i < 100; i++) {
  element.style.color = 'red';
}

ログイン後にコピー

概要:

リフローと再描画はフロントエンド開発における一般的な概念であり、ページのパフォーマンスの最適化に不可欠です。リフローのオーバーヘッドは大きくなり、再描画のオーバーヘッドは小さくなります。開発中は、リフロー操作を頻繁にトリガーすることを避け、再描画操作を合理的に使用してパフォーマンスのオーバーヘッドを軽減するように努める必要があります。以上、リフローと再描画の違いと適用シナリオについて詳しく解説しましたので、皆様のフロントエンド開発の一助になれば幸いです。

参考: