CSSのリフローと再描画とは何ですか

ブラウザで要素のサイズ、位置、色、その他の属性を変更すると、ブラウザはページを再計算して再計算します。レンダリング操作。このうち、この2つの段階をCSSリフロー（リフロー）とリペイント（再描画）と呼びます。

CSS リフローとは、DOM 要素のサイズ、レイアウト、または位置が変更されたときに、ブラウザーが要素の幾何学的プロパティを再計算し、ページのレンダリング ツリーを再構築する必要があることを意味します。リフローは間違いなく再描画を引き起こしますが、再描画が必ずしもリフローを引き起こすとは限りません。

CSS 再描画とは、要素スタイルの変更がレイアウトに影響しない場合、ブラウザーはレイアウトを再計算せずに要素を再描画するだけで済むことを意味します。たとえば、要素の色を変更すると再描画が発生するだけで、リフローは発生しません。

リフローと再描画ではブラウザがページを再計算してレンダリングする必要があるため、パフォーマンスの低下が発生します。したがって、コードを記述するときは、頻繁なリフローと再描画を避けるように努める必要があり、次の最適化手段を講じることができます:

1. DOM スタイルの頻繁な変更を避ける。
2. transform を使用して、リフローを引き起こす上/左などの操作を置き換えます。
3. ドキュメント フラグメント (DocumentFragment) を使用して DOM 操作を実行し、最終的にドキュメントに一度に追加します。
4. CSS 式を使用するとブラウザで毎回再計算が行われるため、使用しないでください。
5. レイアウト情報を頻繁に読み取ったり、オフセット シリーズなどの属性を使用したりしないでください。ブラウザのリフローが強制されるためです。

つまり、コードを適切に記述し、リフローおよび再描画操作を減らすことで、ページのパフォーマンスとユーザー エクスペリエンスを向上させることができます。