web-dev-qa-db-ja.com

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

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

cssperformanceinline-styles
72
George

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

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

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

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

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

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

71
mauris

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

Hrefを使用してスタイルシートを使用する場合、サーバーへの別の要求が必要になり、応答後のファイルの解析が必要になります。インラインスタイルでは、そのいずれも存在せず、単に直接解析します。

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

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

6
sebjwallace

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

3
s.ermakovich

それはできますが、リンクされたスタイルシートまたは外部スタイルシートの理由は、特にサイトの複数のページで同じdivを使用する場合にブラウザにキャッシュできるためです。これは、ブラウザがページをリロードするたびにコードをリロードする代わりに、ブラウザがスタイルシートを一度ロードするだけでよいことを意味します。また、変更やデバッグを容易にする、よりクリーンなコードを作成します。

3
eciusr

真実IS 'YES'

大きな違いがあります。特に、ユーザーインターフェイスを自動化する場合。次のコードを試してください。 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>
2
Don