1. HTML の解析：ブラウザが HTML を読み込んで DOM（Document Object Model）を構築する。
2. CSS の解析：CSS を解析し、スタイルルールを適用して CSSOM（CSS Object Model）を構築する。
3. レンダーツリーの構築：DOM と CSSOM を組み合わせて、レンダーツリーを作成する。
4. レイアウト（Reflow）：各要素の位置やサイズを計算する。
5. 描画（Painting）：計算されたレイアウトに基づいてピクセルを画面に描画する。
6. 合成（Compositing）：異なるレイヤーを組み合わせて最終的な画面を表示する。

• レイアウトの変更が発生すると、ブラウザは影響を受ける要素の位置やサイズを再計算する。
• これを 「リフロー（Reflow）」 と呼び、計算負荷が高くなる可能性がある。
• 以下の操作でリフローが発生する：
  • 要素のサイズ変更（width、height の変更）
  • フォントサイズの変更
  • DOM の追加・削除
  • display の変更（none ⇄ block など）
  • position の変更（absolute、relative など）
  • margin や padding の変更

• 要素の見た目の変更（色、背景、影など）によって再描画が必要になることを 「リペイント（Repaint）」 と呼ぶ。
• color、background、box-shadow などの変更がリペイントを引き起こす。
• リペイントはリフローよりも負荷は低いが、頻繁に発生するとパフォーマンスに影響を与える。

リフローととリペイントする際に、ブラウザの処理は増えるため、できるだけ下記の動作を避けた方がいい

• display: none; を使用して要素を非表示にしてから変更を加え、再度表示する。
• classList.add/remove を活用し、スタイルを一括で変更する。
• transform: translate() を使ってアニメーションを実装する（レイアウト変更を伴わないためリフローが発生しない）。
• will-change を適切に使用し、ブラウザに最適化を促す。

ブラウザのレンダリングパフォーマンスを意識することで、スムーズな動作を維持しながら、効率的な CSS 設計が可能になる。