外部CSSとインラインスタイルのパフォーマンスの違いは？

88

私の友人は、ヘッドセクションの<div style=""></div>ようlink hrefに配置された圧縮されたcssファイルの代わりに使用すると、パフォーマンスがいくらか向上すると言いました。本当？

css  performance  inline-styles 
— ジョージ
ソース
1
私の知る限り、それらは（ほぼ）同じですが、それを確認することはできません。
— ナイトファイアキャット2011年
3
これはいくつかの光を当てるかもしれません：mathiasbynens.be/notes/inline-vs-separate-file
— Sudhir Bastakoti 2011年
1
インラインスタイルであるメンテナンスの悪夢に対処するには、パフォーマンスを大幅に向上させる必要があります。これまでのところ、その証拠は見ていません。
— steveax 2011年
1
古いバージョンのIEの場合、パフォーマンスの向上は非常に重要です。HTMLテーブルがCSSスタイルの接着剤のように動作するのを見てきました。
— ジョナサン

回答:

90

あなたの友人が言及したパフォーマンスの向上は、CSSファイルを使用した（他の要因による）パフォーマンスの向上の量と比較して、おそらく取るに足らないものです。

style属性を使用すると、ブラウザはその特定の要素（この場合は要素）のルールのみを描画し<div>ます。これにより、CSSエンジンがCSSセレクターに一致する要素（a.hoverまたは#someContainer li）を見つけるためのルックアップ時間が短縮されます。

ただし、要素レベルでスタイルを設定すると、CSSスタイルルールを個別にキャッシュできなくなります。通常、CSSファイルにスタイルを配置すると、キャッシュを実行できるため、ページをロードするたびにサーバーからのロード量が削減されます。

スタイルルールを要素レベルに配置すると、どの要素がどのようにスタイル設定されているかがわからなくなります。また、複数の要素を一緒に再描画できる特定の要素をペイントすることによるパフォーマンスの向上を後押しする可能性もあります。CSSファイルを使用するとCSSがHTMLから分離されるため、スタイルが正しいことを確認でき、後で簡単に変更できます。

したがって、比較を見ると、CSSファイルを使用すると、要素レベルでスタイルを設定するよりもはるかに多くの利点があることがわかります。

外部CSSスタイルシートファイルがある場合は忘れないでください。ブラウザはファイルをキャッシュできるため、アプリケーションの効率が向上します。

— モーリス
ソース
4
Chromeプロファイラーで統計を提供できますか？CPUとGPUは、バッテリーの消費が莫大なコストであるモバイルとタブレットではコストがかかります。トレードオフがあると思います。そして、キャッシュの利点は何ですか？ブラウザは現在の要素のスタイルを計算する必要があり、多くのルールがある場合、スタイルの解決にはコストがかかります。
— Akash Kava 2013
28
クライアントに送信する前にスタイルをインライン化するエンジンがあると、メンテナンスに関連するすべての欠点がなくなることに注意してください
— Moshe Shaham 2013年
6
React + Radiumを使用すると、メンテナンスに関連する欠点もなくなります。
— AjaxLeung 2016年
1
@AjaxLeungは間違いなく、あなたとShahamが言ったことは真実です。この回答は、最新のツールのほとんどがまだ利用できなかった2011年に書かれました。
— mauris 2016年
2
はい。今日とそれ以降にこの答えを見た人たちのためにコメントを追加しただけです。
— AjaxLeung 2016年
6

インラインスタイルとスタイルシートを使用すると、ページの読み込みが速くなります。場合によっては、より速くする必要があります。

hrefを使用してスタイルシートを使用する場合、サーバーへの別の要求が必要であり、応答後にファイルを解析する必要があります。インラインスタイルでは、そのようなことはなく、直接解析するだけです。

クライアントのインターネットが遅い場合、その単一の要求は非常に遅くなり、スタイルシートが配信されるまでページのスタイルが失われる可能性があります。繰り返しますが、インラインの場合、遅延はまったくありません。

スタイルシートを使用する唯一の理由は、整理することです。不要な場合もあるので、インラインスタイルやドキュメント内スタイルシートで十分です。

— sebjwallace
ソース
9
この回答は、ブラウザのキャッシュを完全に無視しています。スタイルシートでは、スタイルを1回要求してキャッシュするだけで、ネットワーク経由で送信されるコンテンツの量を減らすことができます。
— GeekOnCoffee 2018年
2
この回答は、インラインスタイルによってHTMLファイルが大きくなるという事実も無視しています。潜在的に、特に繰り返しインラインスタイリングを使用する場合、CSSファイルよりも何倍も大きくなります。ちなみに、ブラウザは複数のファイルを並行してロードできます（そして上記のようにそれらをキャッシュします）。
— Jan Van der Haegen
5

この場合のパフォーマンスは多くの要因（CSSセレクターの複雑さ、ドキュメントサイズなど）に依存するため、答えるのは簡単な質問ではありません。ただし、孤立したケースを取り上げると、CSSクラスは一般にインラインスタイルよりも高速であることがわかります。
インラインスタイルとCSSクラスの違いです。

— s.ermakovich
ソース
5
これは、質問が求めているスタイルが適用される速度ではなく、ノードクラスまたはスタイル属性が変更される速度をテストしていることを確認してください
— Sam
@Sam「スタイルが適用される速度」とはどういう意味ですか？この速度を測定するテストを提供できますか？テストコードを見ると、反復ごとにページのリフローが発生していることがわかります。つまり、テストはクラス/属性の変更だけでなく、ページへの実際の影響もカバーしています。
— s.ermakovich 2014
スタイルを追加する時間も含まれている可能性がありますが、時間も追加されます。JSが追加する必要がなく、ドキュメントにクラステストまたはインラインスタイルがすでに含まれている場合はどうなりますか。どちらの場合でもCSSが解決される速度になっていますが、（間違っているかもしれませんが）このテストではそれだけではなく、余分な作業が行われると思います。
— サム
@Samこのテストは、ブラウザーによるCSSのロードと処理のフットプリントを無視します。私は私の答えの中で、これは孤立したケースであると述べました。さまざまな方法（インラインと外部）を使用してスタイルを適用するパフォーマンスを測定するだけです。これは、今日の典型的なWebアプリケーションが行うことです。ページをリロードせずにHTMLドキュメントをJavaScriptから変更します。
— s.ermakovich 2014
ああ、わかりました。動的に追加されていないスタイルについて言及していました
— Sam
3

リンクされたスタイルシートまたは外部スタイルシートの理由は、特にサイトの複数のページで同じdivを使用している場合に、ブラウザにキャッシュできるようにするためです。つまり、ブラウザがページをリロードするたびにコードをリロードする必要はなく、ブラウザはスタイルシートを1回ロードするだけで済みます。また、コードがクリーンになり、変更やデバッグが容易になります。

— eciusr
ソース
3
これがキャッシュメカニズムの本質です。証明は必要ありません。
— ストロンチウム2013
5
「現金化」できるのは「現金化」という意味ではありません。そして「本質」は事実ではありません。
— Ivan Castellanos
6
みんな、それはもうデュークヌケムの時代ではありません、私たちは人々を現金化しません。一方、キャッシュ...
— Sebas 2015年
3
キャッシュの引数は、通常、すべてを前もってロードしてその場でページを生成するシングルページアプリケーションには当てはまりません。
— MindJuice 2015
1

真実は「はい」です

大きな違いがあります。特にユーザーインターフェイスを自動化する場合。次のコードを試してください。IE10とメモ帳を使って開発しています。私はテストを行っていくうちに学んでいます。これは短縮バージョンのテストです。（私があなたの答えを示すためにコードを減らしたので多分エラーがあります）

参照している画像をクリックして、アラートメッセージを読んでください。ヒント：編集（テスト）する前に、このファイルを編集として再度保存してください。

よろしくお願いします、ドン

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>
— ドン
ソース
28
IE10とメモ帳を使って開発しています。？
— xanderiel 2018年
1

私の意見では、決まった答えはありません。

inline CSSより速くロードする場合は速く、サーバーよりもCSSのコンテンツサイズのダウンロードが応答するだろうexternal CSS file（など、DNSの時間を考慮すると、サーバーの待ち時間）要求。

通常のサイズのCSSの場合は、ページにインライン化します。15〜20 KBを超える場合は、おそらく外部ファイルに入れて、キャッシュできることを確認します。

私が今見逃している他の多くの考慮事項があると確信していますが、インラインと外部の固定された答えはありません。

— adrianTNT
ソース
-1

外部スタイルシートを使用することは、divに適用したスタイルを思い出すのに役立つため、間違いなくより良いオプションです。HTMLコードが少ないほどロードが速くなるため、ページのロード時間が短縮されます。

ただし、場合によっては、特定のdivのプロパティを変更する必要がある場合があり、インラインスタイルが最適なオプションです。そして、本当に言えば、1つまたは2つのインラインスタイルは、ページの読み込み時間を変更しません。

内部スタイルシートの別のオプションがありますが、テンプレートを作成する場合のように、単一ページのWebサイトがある場合にのみ使用されます。これは、すべてのHTMLページにCSSを記述する必要があるためです。

— ヴィッキー
ソース
-3

他のすべての要素または画像に複数の小さなCSSファイルがある外部CSSよりもインラインCSSを使用することを好みます。それぞれに5〜10行のコードを含む複数のCSSファイルをダウンロードしても意味がありません。要素にホバー、アクティブ、チェックなどのプロパティが含まれている場合は、開発プロセスの複雑化を回避するため、外部CSSファイルを使用することになっています。

— atuls1396
ソース
そのため、メンテナンスが非常に困難になります。CSS、JSファイルは、デフォルトでユーザーのブラウザにキャッシュされている必要があります。
— dave21 1819
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.