css - 内部 CSS と外部 CSS

Question

速度、リクエスト、キャッシングなどを考慮して、内部 CSS と外部 CSS の長所と短所は何ですか? 個人的には、動的ページの内部 css がキャッシュされるかどうかわかりません..?

Answer 1

内部CSSの長所：-ダウンロードの高速化：外部スタイルシートごとに1つの追加のHTTPリクエストがあることに注意してください

外部CSSの長所：-Webサイトでは、すべてのページに共通の「テーマ」があるのが一般的です。このような一般的なスタイルをすべて外部ファイルにまとめることができ、1回のダウンロードで、複数のページで使用できる必要なスタイルを取得できます。ダウンロード時間を節約できます。外部スタイルをキャッシュして、適切な有効期限を設定することもできます。

内部CSSの反対点の1つは、htmlのダウンロードサイズが大きくなる可能性があることです。

最善のアプローチ：-差分ページで使用されるスタイルに応じて、内部スタイルと外部スタイルを組み合わせて使用​​します-外部スタイルに有効期限設定を設定し、それらをキャッシュするようにしてください。

キャッシュの有効期限設定と組み合わせる利点：Webアプリの「ルックアンドフィール」は、次の要素によって管理されます。

• 通常、すべてのページで同じ「感触」を維持したい
• コンテンツはスタイリングよりも頻繁に変更される可能性があります

スタイルを外部CSSファイルに入れ、キャッシュの有効期限をたとえば1か月に設定すると、変更されたコンテンツのみがダウンロードされるため、この間、すべてのユーザーの「開始」遅延は非常に短くなります。スタイルは、ブラウザのキャッシュ。有効期限後に誰かが最初にページにアクセスしようとすると、ブラウザは自動的に更新を要求します。

Answer 2

ページがキャッシュ可能である場合、このページの内部CSSもキャッシュ可能です（ページの一部であるため）。ただし、外部スタイルシートには、多くのページで使用でき、キャッシュ可能な場合に1回だけ要求されるという利点があります。

そのため、最初に追加のリクエスト（外部スタイルシート）がありますが、その後のリクエストで転送するデータは少なくなります。

Answer 3

いいえ彼らはしません。外部CSSは、複数のページ/リクエストにまたがってキャッシュできます。さらに、通常、gzipを使用してこれらのファイルを圧縮できます。

Answer 4

外部CSSを使用すると、少なくともサイト全体で1つのCSSファイルを使用する場合は、すべてのページの外観に一貫性が保たれます。最初のページには速度のペナルティがあるかもしれませんが、それ以降はCSSファイルがキャッシュされ、その結果、後続のページの読み込みが実際に速くなります。

私は時々、ページに非常に固有で、他の場所では役に立たない内部CSSを使用します。ただし、それらをインラインに配置しないでください。インラインCSSの保守は非常に困難です。