CSS のリフローと再描画の原則を明らかにする-CSSチュートリアル-php.cn

CSS のリフローと再描画の原則を明らかにする

WBOY

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

オリジナル

1167 人が閲覧しました

CSS のリフローと再描画の原則を明らかにする

CSS リフローと再描画の動作原理を解読する

はじめに:
Web 開発のプロセスでは、CSS リフロー (リフロー) と再描画についてよく耳にします。 . リペイントの2つのコンセプト。 Web ページのパフォーマンスを最適化し、ユーザーエクスペリエンスを向上させるには、それらがどのように機能するかを理解することが重要です。この記事では、CSS のリフローと再描画がどのように機能するかを詳しく説明し、読者がこれら 2 つの概念をよりよく理解できるように具体的なコード例を示します。

1. CSS リフローの仕組み
1.1 CSS リフローとは
CSS リフローとは、ブラウザが要素の位置とサイズを再計算し、ページレイアウトを更新するプロセスを指します。ページ上の要素のレイアウトプロパティが変更されると、CSS リフローがトリガーされます。

1.2 CSS リフローのトリガー条件
次の状況が CSS リフローをトリガーします:

DOM ノードが追加、削除、または変更されたとき;
いつページが変更されたとき要素の位置、サイズ、またはスタイルが変更されたとき;
ウィンドウサイズが変更されたとき;
ユーザーがページをスクロールしたとき;
ブラウザが変更されたときウィンドウが変わります。

1.3 CSS リフローのプロセス
CSS リフローのプロセスは次のとおりです:

CSS リフローがトリガーされると、ブラウザは DOM ツリーを走査して開始します。一番上のルートノードから各ノードの位置とサイズを計算します。
ノードの位置またはサイズが親ノードまたは兄弟ノードの属性に依存する場合、これらのノードの位置とサイズは再計算する必要があります;
すべてのノードの位置とサイズが計算されると、ブラウザはページのレイアウトを更新します。

1.4 不必要な CSS リフローを回避する方法
Web ページのパフォーマンスを向上させるために、不必要な CSS リフローを回避できます。一般的な最適化方法を次に示します。

テーブルレイアウトの使用を避け、CSS レイアウトモデルの使用を試みます。
頻繁な DOM 操作を避け、一度に複数の要素を変更するようにしてください。
バッチスタイル変更を使用して、一度に複数の要素にスタイル変更を適用します。
リフロー中に offsetLeft、offsetTop などのレイアウト情報を取得する操作を削減します。

2. CSS 再描画の仕組み
2.1 CSS 再描画とは
CSS 再描画とは、スタイルの変更に応じてブラウザがページを再描画するプロセスを指します。ページ上の要素のスタイル属性が変更されると、CSS の再描画がトリガーされます。

2.2 CSS 再描画のトリガー条件
次の状況が CSS 再描画をトリガーします:

要素の背景色、フォント色、境界線の色、およびその他のスタイル属性が変更されました;
スタイルシートを追加、削除、および変更する場合;
要素の表示/非表示を変更する場合。

2.3 CSS 再描画のプロセス
CSS 再描画のプロセスは次のとおりです:

CSS 再描画がトリガーされると、ブラウザは新しい内容に従って再描画します。要素のスタイル。要素の描画;
ブラウザは、描画された要素に基づいてビットマップを作成し、それを画面に表示します。

2.4 不必要な CSS 再描画を回避する方法
Web ページのパフォーマンスを向上させるために、不必要な CSS 再描画を回避できます。以下に一般的な最適化方法をいくつか示します:

要素スタイルを個別に変更する代わりにクラスセレクターを使用する;
頻繁に変更されるスタイル属性をまとめて一度に変更する;
JavaScript アニメーションの代わりに CSS アニメーションを使用します (JavaScript アニメーションは要素のスタイル属性を頻繁に変更するため、再描画が発生します);
CSS 式の使用は避けてください。

3. コード例
次は、不必要な CSS のリフローと再描画を回避する方法を示す簡単なコード例です。

<!DOCTYPE html>
<html>
<head>
  <style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 1s;
  }
  </style>
</head>
<body>
  <div class="box"></div>
  <button onclick="changeWidth()">改变宽度</button>
  <script>
    function changeWidth() {
      var box = document.querySelector('.box');
      // 触发一次CSS回流和重绘
      box.style.width = '200px';
    }
  </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、ボタンをクリックしてボックスの幅を変更すると、transition 属性を使用しているため、ブラウザは CSS アニメーションを使用して幅を遷移させます。変更することで、CSS を 1 回だけトリガーしてリフローと再描画を行うことで、パフォーマンスが向上しました。

結論:
この記事では、CSS リフローと再描画の動作原理を詳しく解読し、具体的なコード例を示します。これら 2 つの概念がどのように機能するかを理解することで、Web ページのパフォーマンスを最適化し、ユーザーエクスペリエンスを向上させることができます。読者の皆様がこの知識を活用して、より優れたパフォーマンスの Web ページを開発できることを願っています。

以上がCSS のリフローと再描画の原則を明らかにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。