CSSを使う最速の方法

Question

おはようございます。 CSSを使用するには3つの方法があります：最初に<link rel="stylesheet" href="layout.css">のような頭に埋め込まれたexternファイル経由、2番目：<style> body {background-color:green;} h1 {color:blue;} p {color:yellow;}</style>のような頭の中で直接、<h1 style="background-color:blue;">Blue background</h1>のようなHTML要素のスタイル属性を使用します。

私の質問は次のとおりです。どちらがブラウザにとって最も速いのですか？

Answer 1

外部のCSSファイルを使用する方法があります。パフォーマンスが良くなるか悪くなるかはわかりませんが、コードはより洗練されています。コードは小さくても、正しい習慣を得ることは、私に尋ねると非常に重要です。あなたはCSSの最適化についての詳細を読みたい場合は 、これは偉大な読み取りです：Optimize CSS delivery

Answer 2

外部シートへ<link>は、最初に時間の量に応じて、最も遅いかもしれませんが3間の速度差は、ごくわずかですバイト（ttfb）。すべてのページが同じスタイルシートを使用するマルチページアプリケーションを使用している場合、ページスタイルは外部スタイルシートと一緒にダウンします。これは、一度ダウンロードされてからブラウザキャッシュによって再利用されるためです。それはあなたのCSSを変更するのに最も便利な方法です。さらに、どのような種類のCSS読み込みもブラウザには些細なものであり、あなたが使用しているメソッドに起因する減速に気づかないでしょう。

Answer 3

これは、あなたのCSSとあなたのページのパラメータの束に依存します。 Googleがこの記事Optimizing CSS deliveryとthis oneを読むことをお勧めします。ほとんどの場合、最も速く最良の選択肢は、<link>タグで指定された外部ファイルを使用することです。しかし、あなたのcssファイルをすべて1つのファイルに連結する必要があることを覚えておいてください。各ファイルはサーバーへのネットワーク経由の往復であり、確実にページの読み込み速度を低下させます。

Answer 4

おそらく、ドキュメントの先頭にスタイルが続く最も速い方法です。このCSSファイルの1リクエスト（要求、接続、待機、受信）を保存するのが理由です。

しかし、複数のページがある場合、外部ファイルは最初のページのブラウザでキャッシュされ、そのブラウザキャッシュから他のページにロードされるため、おそらく高速です。

外部ファイルは、よりクリーンなので、最適なソリューションです。私は1ページでもそれを好む。

Answer 5

ご希望に応じます。私は外部のスタイルシート（<link rel="stylesheet" href="layout.css">）を使うことを好むでしょう。複数のHTMLページがある場合は、コードをコピーして貼り付けなくても、より簡単で簡単にコーディングできます。

外部スタイリングからスタイリングをオーバーライドする必要がある場合は、インラインスタイリングを使用します。すべてのスタイリングがインラインでコーディングされていると、これはかなり面倒です。

Answer 6

はいけないものを3〜:)

速度はCSSファイルを使用して（他の要素を介して）パフォーマンス向上の量に比べて本当にあまりにも自明であることを行います。

これらの要因の1つはキャッシュです。 cssファイルを使用するとキャッシュが可能になり、要求ごとにサーバーからの負荷が軽減されます。それはスピードの面で重要であり、それをインラインに置く。

次に、インラインで特定の要素をペイントすることによってコードを複製することに問題があります。この要素では、CSSを介して複数の要素を一緒に再描画できます。

リンクにはたくさんのリンクがたくさんありますので、3つ目が最速ですが、最初の方法が最速になる他の要素があります。