101

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

4

9 に答える 9

107

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

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

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

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

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

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

于 2011-11-27T08:20:34.107 に答える
7

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

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

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

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

于 2016-04-12T15:47:50.993 に答える
5

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

于 2013-09-30T10:46:13.483 に答える
3

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

于 2011-11-27T08:16:33.730 に答える
-1

div に適用したスタイルを覚えておくのに役立つため、外部スタイル シートを使用する方が間違いなく優れたオプションです。HTMLコードが少ないほど読み込みが速くなるため、ページの読み込み時間が短縮されます。

ただし、特定の div の一部のプロパティを変更する必要がある場合は、インライン スタイルが最適なオプションです。実際のところ、インライン スタイルを 1 つまたは 2 つ使用しても、ページの読み込み時間は変わりません。

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

于 2013-10-24T12:59:41.450 に答える