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

WBOY
リリース: 2024-01-26 09:59:06
オリジナル
1166 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!