CSS ファイルを導入する 3 つの方法_html/css_WEB-ITnose

CSS ファイルを導入する 3 つの方法

1: 埋め込み:

1

より直感的ですが、大部分はページサイズが大きくなり、構造とパフォーマンスの分離という設計思想に準拠していません。

2: インライン:

1

インライン CSS は、HTTP リクエストを効果的に削減し、ページのパフォーマンスを向上させ、サーバーの負荷を軽減します。ブラウザは CSS を読み込んだ後でのみページをレンダリングできるため、CSS ファイルが読み取られてページに縞模様が発生するのを防ぐことができます。

3: アウトリーチ:

1

4: アウトリーチとインラインそれぞれがあります利点。実際の状況に基づいて適切なカスケード方法を選択できます

Outreach

利点: ページを変更する必要がある場合、1 つのファイルのみを変更する必要があるため、メンテナンスに便利です。 。

短所: HTTP リクエストが多く、ブラウザはページをレンダリングする前に CSS を読み込む必要があるため、ページのパフォーマンスに影響します。

組み込み

利点: インライン CSS は、HTTP リクエストを効果的に削減し、ページのパフォーマンスを向上させ、サーバーの負荷を軽減します。ブラウザーは CSS をロードした後でのみページをレンダリングできるため、CSS ファイルが読み取れなくなったり、ページに縞模様が発生したりすることを防ぐことができます。

短所: CSSを変更するたびに複数のページを変更する必要があり、後のコードメンテナンスに役立たない

5: 実際の作業でのアプリケーション

実際のアプリケーションで外部ファイルを使用するとページを改善できるJavaScript ファイルと CSS ファイルの両方をブラウザにキャッシュできるためです。

HTML ドキュメントに組み込まれている JavaScript と CSS は、リクエストごとに HTML ドキュメントとともに再ダウンロードされます。これにより HTTP リクエストの数は減りますが、HTML ドキュメントのサイズは増加します。

一方、外部ファイルの JavaScript や CSS をブラウザがキャッシュすると、HTTP リクエストの数を増やさずに HTML ドキュメントのサイズを削減できます。

重要な問題は、外部 JavaScript および CSS ファイルのキャッシュの頻度が HTML ドキュメントがリクエストされる回数に関係しているということです。ある程度の難易度はありますが、それでも測定できる指標はいくつかあります。ユーザーがセッション中にサイト上の複数のページを表示し、それらのページ間で同じスクリプトとスタイルシートが再利用される場合、外部ファイルをキャッシュすることの利点は大きくなります。

ページビューの大きいホームページの場合、組み込みコードによる HTTP リクエストの削減の利点と、外部ファイルを使用したキャッシュの利点のバランスを取ることができる手法があります。その 1 つは、ホームページに JavaScript と CSS を組み込むことですが、ページのダウンロード後に外部ファイルを動的にダウンロードすることです。これらのファイルがサブページで使用される場合、それらのファイルはすでにブラウザーにキャッシュされています。