UI応答性のためのCSSのデバッグ-CSSチュートリアル-php.cn

再配置とは何ですか？ {.title}

注：ページロード{.title}

タイムラインツール{.title}

ホームページ

ウェブフロントエンド

CSSチュートリアル

UI応答性のためのCSSのデバッグ

Jennifer Aniston

Feb 18, 2025 pm 01:13 PM

この記事は、ティファニー・ブラウンが書いた本「The Master of CSS」から抜粋しています。この本は世界中の主要な書店で入手できます。また、ここで電子書籍バージョンを購入することもできます。

css特定のプロパティと値はリフローをトリガーします。これは高価で、ユーザーインターフェイスの応答速度を低下させる可能性があります - ページレンダリング、アニメーションの流ency性、スクロールパフォーマンスは、特に携帯電話やタブレットで影響を受けます。テレビ。

再配置とは何ですか？ {.title}

再配置とは、ページの一部またはすべてのレイアウトを変更する操作を指します。たとえば、要素のサイズを変更するか、左の位置を更新します。ブラウザは、ドキュメント内の他の要素の高さ、幅、および位置を再計算します。

repaint（Repaint）は再塗装に似ており、ブラウザにドキュメントの一部を再レンダリングするように強制します。たとえば、ボタンの上にホバリングするときにマウスの色を変更することは、再描画操作です。 RedRawは、ノードのサイズまたは位置に影響を与えないため、再配置に影響を与えません。

再配置と再描画は、通常、要素の追加や削除など、DOM操作によってトリガーされます。しかし、それらは、要素のサイズ、可視性、または位置に影響を与える属性の変化によって引き起こされる可能性があります。これは、変更がJavaScriptまたはCSSベースのアニメーションによって引き起こされているかどうかに当てはまります。

注：ページロード{.title}

ページが読み込まれると、ブラウザは最初のHTML、CSS、およびJavaScriptを解析します。

プロジェクトの再描画と再配置を完全に避けることは困難です。ただし、タイムラインツールを使用してそれらを識別し、その影響を減らすことができます。

タイムラインツール{.title}

タイムラインツールは、最初は少し混乱する可能性があります。フロントエンドのパフォーマンスを測定し、さまざまなタスクが完了するまでの時間を記録します。ページと対話しながらアクティビティを記録することにより、どのCSSコードがパフォーマンスボトルネックを引き起こすかを確認できます。

タイムラインを使用するには、[開発者ツール]インターフェイスの[タイムライン]タブをクリックします。 Chrome、Opera、およびFirefoxでは、適切に「タイムライン」と名付けられています。サファリはそれを複数形の「タイムライン」と名付けました。 Internet Explorer 11は、より記述的な名前「UI応答性」を使用します。 ^[9] 任意のブラウザでは、「レコード」ボタンを押して録音プロセスを開始します。問題があるページの部分と対話し、終了したら、対応するボタンをクリックして録音を停止します。

使用しているブラウザによっては、すぐにデータが表示されるか、録音を停止した後に表示される場合があります。 SafariとFirefoxはリアルタイムでデータを表示しますが、Chrome、Opera、およびInternet Explorerは、録音を停止した後にパフォーマンスチャートをレンダリングします。

ドキュメントの読み込み、関数呼び出し、DOMイベント、スタイルの再計算、および描画操作はすべて各ブラウザに記録されているため、パフォーマンスボトルネックの概要を説明できます。 CSSのパフォーマンスについては、少なくとも2つの関連する側面に焦点を当てる必要があります。

多くのスタイルの再計算と描画操作
長い時間のかかる操作、タイムラインのより大きなブロックは

実際の状況を理解するために、2つの基本的なドキュメント、例Aと例Bを比較します。どちらの場合も、x位置0からx位置1000に一連のdiv {.riteral}要素を移動します。どちらの例もCSS変換を使用しています。ただし、例aでは、left属性をアニメーション化します。例bでは、変換変換を使用し、transform属性をアニメーション化します。

2つの例のマークは同じです（結果は図3.16に示されています）：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Performance example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <button type="button" id="move">Move</button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <🎜>
  </body>
</html>

ログイン後にコピー

Debugging CSS for UI Responsiveness

図3.16 SafariブラウザーのHTMLデモページ。両方のドキュメントのJavaScriptコードも同じです。 [移動]ボタンをクリックすると、各div要素のクラスが切り替わります。

movedCSSコードは2つの別の部分です。例Aで使用されているCSSは次のとおりです。

var move = document.getElementById('move');
move.addEventListener('click', function(e) {
    var objs = document.body.querySelectorAll('div');
    Array.prototype.forEach.call(objs, function(o){
        o.classList.toggle('moved');
    });
});

ログイン後にコピー

の後、このアニメーションは、タイムラインで多数のスタイル計算と再描画インジケーターを生成します。次の画像は、Safari（図3.17）、Chrome（図3.18）、Internet Explorer（図3.19）、およびFirefox（図3.20）でのこの変換のタイムライン出力を示しています。

div {
  background: #36f;
  margin-bottom: 1em;
  width: 30px;
  height: 30px;
  position: relative;
  left: 0;
  transition: left 2s ease-in;
}

.moved {
    left: 1000px;
}

ログイン後にコピー

図3.17サファリブラウザの左の位置変換

Internet Explorer 11ブラウザーの左の位置変換のタイムライン出力 Debugging CSS for UI Responsiveness

図3.20 firefoxブラウザの出力 Debugging CSS for UI Responsiveness

スタイルの計算と再描画は、次のものに関連しています。

。変更がアニメーションまたは変換によって引き起こされた場合でも、変更が変更されたときに属性の属性トリガーの並べ替えをトリガーします。

さて、例bのCSSを見てみましょう：

ここでは、変換を使用して

と

を変換します。 left leftほとんどのブラウザーでは、変換は再注文をトリガーしません。また、タイムラインには塗り直し操作が少なくなります。これは、Safari（図3.21）、Chrome（図3.22）、およびインターネットエクスプローラー（図3.23）で明らかです。 Firefoxは例外です。左の変換と変換変換のタイムラインは非常に似ています。

Debugging CSS for UI Responsiveness

図3.21 -webkit-transform

の属性の属性の出力図3.22ブラウザtransform

図3.23削除されるコードの{.title}

残念ながら、どのプロパティが再配置と再描画を引き起こすかについての明確なリストはありません。 Paul LewisのCSSトリガーは最も近いですが、クロム固有です。ただし、ブラウザはこれらのプロパティの多くで同様に動作するため、このリソースは少なくともどのプロパティが問題を引き起こす可能性があるかについてのアイデアを提供します。 Debugging CSS for UI Responsiveness