インライン対外部CSSの適用において、ブラウザの速度はどのように変化しますか？

Question

インライン対外部CSSについて、私はキャッシュの問題と、より大きなファイルの複数のダウンロードと1回のダウンロードのトレードオフを理解しています。私が知りたいのは、CSSを置くことができる3つの場所に基づいて、レンダリングの速度がどのように変わるかです。

つまり、実際にページを描画するのに最も時間がかかりますか？キャッシュされていても、ブラウザはルールを取得して解析し、現在の要素に適用する必要があるため、外部が最も遅いと想定します。また、内部（ページ内でスタイルタグ内）は2番目に遅いと仮定しています。なぜなら、ルールを解析し、どのルールをどの要素に適用するか決定するプロセスがまだあるからです。そして、私はブラウザが要素に要素をマッチさせるプロセスをスキップできるので、（スタイル属性を介して直接適用される）インラインが最も速いと仮定します。

誰もこれを深く見たことがありますか？私はインラインでしか解決できない複雑なCSSの大きなページにレンダリングの問題があることを知っています。 （複雑なCSSを使った大きなページの悪の講義はありません）

Answer 1

いずれにしても、実際のルールテキストが読み込まれると、同じCSSパーザで実行されます。外部vsでは異なるパーサはありません。内部CSS。それはすべてのCSSです。外部からは、ファイルを取得するために追加のHTTPリクエストが必要になるため、適用が少し遅くなることがありますが、ホストブラウザに転送されると、同じルールを物理的に埋め込んだ場合と同じくらい速く解析されますインライン<style>ブロック。

Answer 2

どのモードが最速であるかを気にする必要はありません。 HTML、CSS、JSはどんな場合でも高速であることを意図したものではありません。

私はあなたが可読性と保守性について心配し、HTMLタグの中にスタイルが直接適用されたWebページを管理することを考えなければならないと思います。あなたはそのように複雑なものを管理することはできません。

あなたが主に求めているのは、ブラウザの実装（私たちが話している解決策に従って別々にダウンロードできるCSSファイルに関して）によって異なります。いずれにしても、同じパーサによって解析する必要があるという理由だけで、違いはそれほど大きくないとは思えません。

ページが本当に複雑すぎてスタイルシートでスタイル設定することができず、インラインスタイルが必要な場合は、インラインCSSではなく、異なるレベルでリファクタリングすることで問題を解決する必要があります。

さらに、厳しい/巧妙なセレクタを持つことを考慮しなくても、日々機能を追加するだけで、CSSを書くだけで多くのパフォーマンスの問題が発生する可能性があります。物事を考えながら開発すること（通常はウェブ開発、特にフロントエンドに残されていること）は、通常、最良の方法です。