この記事は、ティファニー?ブラウンが書いた本「The Master of CSS」から抜粋しています。この本は世界中の主要な書店で入手できます。また、ここで電子書籍バージョンを購入することもできます。
css特定のプロパティと値はリフローをトリガーします。これは高価で、ユーザーインターフェイスの応答速度を低下させる可能性があります - ページレンダリング、アニメーションの流ency性、スクロールパフォーマンスは、特に攜帯電話やタブレットで影響を受けます。テレビ。
再配置とは何ですか？ {.title}
再配置とは、ページの一部またはすべてのレイアウトを変更する操作を指します。たとえば、要素のサイズを変更するか、左の位置を更新します。ブラウザは、ドキュメント內(nèi)の他の要素の高さ、幅、および位置を再計算します。
repaint（Repaint）は再塗裝に似ており、ブラウザにドキュメントの一部を再レンダリングするように強(qiáng)制します。たとえば、ボタンの上にホバリングするときにマウスの色を変更することは、再描畫操作です。 RedRawは、ノードのサイズまたは位置に影響を與えないため、再配置に影響を與えません。
再配置と再描畫は、通常、要素の追加や削除など、DOM操作によってトリガーされます。しかし、それらは、要素のサイズ、可視性、または位置に影響を與える屬性の変化によって引き起こされる可能性があります。これは、変更がJavaScriptまたはCSSベースのアニメーションによって引き起こされているかどうかに當(dāng)てはまります。
注：ページロード{.title}
ページが読み込まれると、ブラウザは最初のHTML、CSS、およびJavaScriptを解析します。
プロジェクトの再描畫と再配置を完全に避けることは困難です。ただし、タイムラインツールを使用してそれらを識別し、その影響を減らすことができます。
タイムラインツール{.title}
タイムラインツールは、最初は少し混亂する可能性があります。フロントエンドのパフォーマンスを測定し、さまざまなタスクが完了するまでの時間を記録します。ページと対話しながらアクティビティを記録することにより、どのCSSコードがパフォーマンスボトルネックを引き起こすかを確認(rèn)できます。
タイムラインを使用するには、[開発者ツール]インターフェイスの[タイムライン]タブをクリックします。 Chrome、Opera、およびFirefoxでは、適切に「タイムライン」と名付けられています。サファリはそれを複數(shù)形の「タイムライン」と名付けました。 Internet Explorer 11は、より記述的な名前「UI応答性」を使用します。 [9] 任意のブラウザでは、「レコード」ボタンを押して録音プロセスを開始します。問題があるページの部分と対話し、終了したら、対応するボタンをクリックして録音を停止します。
使用しているブラウザによっては、すぐにデータが表示されるか、録音を停止した後に表示される場合があります。 SafariとFirefoxはリアルタイムでデータを表示しますが、Chrome、Opera、およびInternet Explorerは、録音を停止した後にパフォーマンスチャートをレンダリングします。
ドキュメントの読み込み、関數(shù)呼び出し、DOMイベント、スタイルの再計算、および描畫操作はすべて各ブラウザに記録されているため、パフォーマンスボトルネックの概要を説明できます。 CSSのパフォーマンスについては、少なくとも2つの関連する側(cè)面に焦點(diǎn)を當(dāng)てる必要があります。
- 多くのスタイルの再計算と描畫操作
- 長い時間のかかる操作、タイムラインのより大きなブロックは
を表しています
実際の狀況を理解するために、2つの基本的なドキュメント、例Aと例Bを比較します。どちらの場合も、x位置0からx位置1000に一連のdiv {.riteral}要素を移動します。どちらの例もCSS変換を使用しています。ただし、例aでは、left屬性をアニメーション化します。例bでは、変換変換を使用し、transform屬性をアニメーション化します。
2つの例のマークは同じです（結(jié)果は図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>
図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');
});
});の後、このアニメーションは、タイムラインで多數(shù)のスタイル計算と再描畫インジケーターを生成します。次の畫像は、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ブラウザーの左の位置変換のタイムライン出力 図3.20 firefoxブラウザの出力スタイルの計算と再描畫は、次のものに関連しています。 。変更がアニメーションまたは変換によって引き起こされた場合でも、変更が変更されたときに屬性の屬性トリガーの並べ替えをトリガーします。
さて、例bのCSSを見てみましょう：
ここでは、変換を使用してとを変換します。 left
leftほとんどのブラウザーでは、変換は再注文をトリガーしません。また、タイムラインには塗り直し操作が少なくなります。これは、Safari（図3.21）、Chrome（図3.22）、およびインターネットエクスプローラー（図3.23）で明らかです。 Firefoxは例外です。左の変換と変換変換のタイムラインは非常に似ています。
図3.21 -webkit-transform の屬性の屬性の出力図3.22ブラウザtransform 図3.23削除されるコードの{.title}
殘念ながら、どのプロパティが再配置と再描畫を引き起こすかについての明確なリストはありません。 Paul LewisのCSSトリガーは最も近いですが、クロム固有です。ただし、ブラウザはこれらのプロパティの多くで同様に動作するため、このリソースは少なくともどのプロパティが問題を引き起こす可能性があるかについてのアイデアを提供します。
どのプロパティが問題になるかがわかったら、次のステップは仮説をテストすることです。コメントを使用するか、一時的なtransformプレフィックスを追加してプロパティを無効にし、タイムラインテストを再実行します。
パフォーマンスは相対的であり、絶対的でも完全でもないことを忘れないでください。目標(biāo)は改善することです。以前よりもパフォーマンスを向上させることです。屬性または効果のパフォーマンスが受け入れるには遅すぎる場合、完全に削除されます。
以上がUI応答性のためのCSSのデバッグの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。