パフォーマンスの最適化

消費量の多いスタイルを慎重に選択してください

消費量の多い属性では、描画前にブラウザで多くの計算を実行する必要があります:

box-shadows
border-radius
透明性
変換
CSSフィルター(パフォーマンスキラー)

過剰なリフローを避ける

リフローが発生すると、ブラウザはレイアウトの位置とサイズ、詳細を再計算する必要があります。

一般的なリフロー要素:

幅
高さ
パディング
マージン
表示
ボーダー幅
ポジション
トップ
左
右
下
font-size
float
text-align
overflow-y
フォントの太さ
オーバーフロー
フォントファミリー
行の高さ
vertical-align
clear
white-space
min-height

ディスプレイを正しく使用する属性

Display 属性はページのレンダリングに影響します。合理的に使用してください。

display: 幅、高さ、マージン、パディング、float は inline-block の後に使用しないでください。
display: ブロックの後には使用しないでください。
display: table-* は margin や float の後に使用しないでください。
Float を乱用しないでください

アニメーションパフォーマンスの最適化

アニメーションの実装原理は、人間の目の「視覚の持続」現象を利用して、短時間に複数の静止画を連続的に再生することで、肉眼に錯覚を引き起こすことです。残像を視覚化し、画像を「動き」として誤って見てしまいます。

アニメーションの基本概念:

フレーム: アニメーションプロセス中、各静止画は「フレーム」です。

フレームレート: つまり、1秒あたりに再生される静止画の数、単位はfpsです。 (フレーム/秒);
フレーム継続時間: 各静止画の滞留時間、単位は通常 ms (ミリ秒) です。
フレームスキップ (フレームドロップ/ドロップフレーム): フレームレートアニメーションでは、特定のフレームの継続時間が平均フレーム継続時間よりも大幅に長くなるため、後続のフレームが圧迫されて失われます。
一般的なブラウザのレンダリングリフレッシュレートは60fpsなので、Webページではフレームレート50〜60fpsのアニメーションがかなり滑らかで快適になります。

JavaScript ベースのアニメーションを使用する場合は、setTimeout、setInterval の使用を避けて、requestAnimationFrame を使用するようにしてください。

CSS を使用してアニメーションを宣言することは避けてください。サーバーの最適化のために。
絶対位置決めの代わりに移動を使用すると、fps が向上し、アニメーションがよりスムーズになります。

3D 変形を通じて GPU アクセラレーションをオンにするなど、より多くのハードウェア機能を使用します

一般的に Chrome では、3D または透視変換 (パースペクティブ変換) CSS プロパティと不透明度の CSS アニメーションが新しいレイヤーを作成し、ハードウェアアクセラレーションによるレンダリングが行われます。チャネルの最適化では、GPU が 3D 変形などの操作を完了した後、ブラウザーの大規模な再描画や再配置のトリガーを避けるために複合操作 (Compesite Layers) を実行します。

注: 3D 変形はより多くのメモリと電力を消費します。

translate3d を使用して右に 500 ピクセル移動するアニメーションの滑らかさは、左を直接使用するよりも大幅に優れています:

.ball-1 {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
.ball-1.slidein{
  -webkit-transform: translate3d(500px, 0, 0);
}
.ball-2 {
  transition: left .5s ease; left：0;
}
.ball-2.slidein {
  left：500px;
}

CSS セレクターのパフォーマンスの向上

CSS セレクターのパフォーマンスへの影響は、セレクターとドキュメント要素には時間がかかるため、セレクターを最適化する原則は、より多くのマッチング時間を消費するセレクターの使用を避けることです。その前に、サブセレクタールールなどの CSS セレクターマッチングメカニズムを理解する必要があります。

#header > a {font-weight:blod;}

私たちのほとんどは左から右に読み、マッチングルールが右から実行されるように習慣的にブラウザを設定します。このルールのコストは高くないと推測されます。

ブラウザが次のように動作すると仮定します。ID ヘッダーを持つ要素を検索し、直接の子要素内の a 要素にスタイルルールを適用します。ドキュメント内に id ヘッダーを持つ要素は 1 つだけあり、a 要素の子はいくつかしかないことがわかっているため、この CSS セレクターは非常に効率的であるはずです。

実際はその逆で、CSS セレクターはルールを右から左に照合します。このメカニズムを理解すると、この例の一見効率的なセレクターは、実際には非常に高いマッチングコストを伴うことがわかります。ブラウザーはページ内のすべての a 要素を走査し、その親要素の ID がヘッダーであるかどうかを判断する必要があります。

例の子セレクターを子孫セレクターに変更すると、ページ内のすべての要素を走査した後、その上位要素をルートノードまで走査する必要があり、コストが高くなります。

#header  a {font-weight:blod;}

CSS セレクターが右から左に一致するメカニズムを理解した後、現在のセレクターの左側に他のセレクターがある限り、スタイルシステムは、一致するセレクターが見つかるまで左に移動し続けることがわかりました。ルールに一致するか、一致しない場合は終了します。一番右のセレクターをキーセレクターと呼びます。 ——詳細

1. ユニバーサルセレクターの使用を避ける

/* Not recommended */
.content * {color: red;}

ドキュメント内のすべての要素を照合した後、ブラウザーはドキュメントのルートノードまでのクラスコンテンツと要素を照合します。したがって、マッチングのオーバーヘッドが非常に大きくなるため、ワイルドカードセレクターであるキーセレクターの使用は避けてください。

2. ID セレクターを制限するためにタグやクラスセレクターを使用しないでください

/* Not recommended */
button#backButton {…}
/* Recommended */
#newMenuIcon {…}

3. クラスセレクターを制限するためにタグを使用しないでください

/* Not recommended */
treecell.indented {…}
/* Recommended */
.treecell-indented {…}
/* Much to recommended */
.hierarchy-deep {…}

4. 多層タグセレクターを使用しないでください。 CSS 検索を減らすためにクラスセレクターの置換を使用します

/* Not recommended */
treeitem[mailfolder="true"] > treerow > treecell {…}
/* Recommended */
.treecell-mailfolder {…}

5. サブセレクターの使用を避ける

/* Not recommended */
treehead treerow treecell {…}
/* Recommended */
treehead > treerow > treecell {…}
/* Much to recommended */
.treecell-header {…}

6. 継承を使用します

/* Not recommended */
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
/* Recommended */
#bookmarkMenuItem { list-style-image: url(blah) }

パフォーマンスの最適化