on:2019年4月11日sponsors当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。パフォーマンスを意識すると、実装も変わってくると思います。Gerard下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにCSSの用語CSSのパフォーマンスCSSの記述の順番リソースはじめにこの記事は私がこれまで一緒に働いたことのある人を批判するものではありません。個人的にCSSについて調べて、学んだことのリストです。多くのデベロッパーがCSSについてあまり気にかけていないという事実は目新しいことではありません。ネット上や、友人・同僚と話すことでそのことに気がつきます。コミュニティでは学ぶことの多くが仲間との知識共有から生まれています。その結果、私は今まで一度も言われたことのないCSSについての本質的なことがあることを認識しました。私は個人的に調べ、CSSをよりよく理解して書くために私が興味深く有用であると思うコンセプトのリストをまとめることにしました。このリストは完全に網羅されているわけではありません。私が学んだこと、そして他の人に役立つことができる場合に備えて共有したいことが含まれています。CSSの用語CSSにはすべてのプログラミング言語と同様に、コンセプトを説明するために使用される用語があります。CSSも他の言語と同じです。用語を習得することは、コミュニケーションの手助けや自分の知識のためにも重要です。combinator)例えば、セレクタの間にある空白スペースが何と呼ばれるか知っていますか?これは子孫結合子と呼ばれるものです。uiとliの間の空白スペースは子孫結合子と呼ばれます。uiとliの間の空白スペースは子孫結合子と呼ばれます。pink;}レイアウト、ペイント、コンポジットこれらの用語はブラウザがどのようにレンダリングするかに関係していますが、レンダリングのさまざまなステップに影響を与えるCSSのプロパティがあるため、重要です。レイアウト(Layout)レイアウトは、要素がスクリーン上に存在するときにどのくらいのスペースが必要かを計算します。heightなど)を変更すると、ブラウザは他のすべての要素を確認してページをリフローする必要があります。影響を受けるエリアを再描画してそれらを合成します。borderなど)のピクセルを塗りつぶす処理をします。要素を描画することは通常、レイヤー上で行われます。CSSのペイントプロパティは変更してもページのレイアウトには影響しないので、ブラウザはレイアウトのステップをスキップしますが、それでもペイントは行われます。ペイントはこれらの中で最も負荷がかかります。コンポジット(Composite)コンポジットは、ブラウザが正しい順序でレイヤを描画する必要があるステップです。一部の要素は互いに重なり合う可能性があるため、このステップは要素が意図した順序で表示されるようにするために重要です。レイアウトもペイントも必要としないCSSのプロパティを変更した場合、ブラウザはコンポジットを行うだけで済みます。Triggersに一覧があります。TriggersCSSのパフォーマンス子孫セレクタは高負荷になる可能性があるアプリケーションの大きさにもよりますが、子孫セレクタを特定的な指定なしで使用すると、非常にコストがかかる場合があります。その関係は親子に限定されないため、ブラウザはすべての子孫要素の一致を確認するからです。}ブラウザは#nav内を解析する前にページ上のすべてのリンクを解析します。パフォーマンスをよくするためには、#nav要素内の各<a>を特定できるセレクタ(.navigation-linkなど)を追加します。ブラウザはセレクタを右から左に読むこの知識は必須ですが、私は知りませんでした。ブラウザはCSSを解析するとき、CSSのセレクタを右から左に解決します。下記のコードを見てみてください。green;}実行される手順は下記の通りです。最初に、ページ上のすべての<a>を解析します。<li>に含まれるすべての<a>を見つけます。上2つで一致した要素の中から、<ul>に含まれるものを見つけます。最後に、.containerを持つ要素に含まれるものに絞り込みます。この手順を見ると、右にあるセレクタがより特定的であるほど、ブラウザはCSSのプロパティを見つけるときに効率的になることが分かります。aの代わりに<a>タグ自体に.container-link-styleのような特定できるセレクタを追加します。レイアウトを可能な限り変更しない一部のプロパティを変更すると、レイアウト全体をアップデートする必要があります。leftのようなプロパティを変更すると、レイアウトは計算されることを必要とし、レンダーツリーをアップデートする必要があります。多くの要素でこれらのプロパティを変更すると、それらの位置やサイズを計算して更新するのに長い時間がかかります。ペイントの複雑さに注意ペイントに関しては、CSSプロパティの中には他のものよりも高負荷なもの(blurなど)があります。同じ結果を得るために、他のより効果的な方法がないか検討してください。高負荷なCSSのプロパティいくつかのプロパティは他よりも高負荷です。これが意味するのは、描画するのにより長い時間がかかるということです。負荷が高いのは下記のプロパティです。fixedこれらをまったく使用してはいけない、という意味ではありません。これらを使用して何百回もレンダリングすると、レンダリングのパフォーマンスに影響を与えることを理解しておく必要があります。下記のコードを見てみてください。blue;}そしてこのスタイルを適用するHTMLです。blue</div>HTMLのセレクタの順番は関係ありませんが、CSSファイルでの順番は関係があります。CSSのパフォーマンスを確認する良い方法は、デベロッパーツールを使用することです。ChromeまたはFirefoxを使用している場合は、デベロッパーツールを開いて「パフォーマンス」タブに移動し、ページを読み込んだり操作したりした時に何が起こっているのかを記録できます。デベロッパーツールの「パフォーマンス」タブリソースこの記事を書くために調べている間、私はいくつかの便利なツールに出会いました。未使用のスタイルをCSSから削除するためのツール。CSSのセレクタを説明するツール。レイアウトのパフォーマンスを向上させるためにDOMの読み書き操作をバッチ処理するためのツール。この知識があなたの役に立つことを願っています。ここまで読んでくれて、ありがとうございます。