1

I created a new website with 46 pages: http://www.lampshade111.com/ I use Microsoft Expression Web 4 employing a dynamic web template. All css was embedded within the heading of the dwt page and updated to every individual web page. Everything looks and works perfectly - no problems.

However, everything I have read suggests using an external style sheet. So in the spirit of "good practice", I removed css from the dwt heading and employed (linked) an external style sheet to the dwt. Of course the individual pages are updated by the dwt and the linked css file is shown on every page. Again, everything looks and works perfectly as before.

Problem: When viewing my website after employing an external style sheet, the website is much slower in my browser.

I have another website with 256 pages and all css is embedded within the heading of the master dwt - no external style sheet. http://www.hoylelamps.com/ It has worked fine for many years.

Questions: Is there any reason to not use css in the heading of a dwt ? Is this suppose to be more efficient (faster) than an external style sheet ? I cannot find any information on this subject.

Thanks for any help ? - Jim

4

1 に答える 1

1

外部スタイル シートが外部スタイル シートよりも「はるかに遅い」理由を想像できません。リンクされたスタイル シートは、読み込まれるとすぐにキャッシュされるため、再度読み込む必要はありません。つまり、各ページでまったく異なる書式設定を使用していない限り、2 番目と 3 番目のページを読み込む方が速くなります。

埋め込みスタイル シートは、1 つのリソースのみを読み込む必要があるため、最初は高速に実行されます。しかし、時間の経過とともに、スタイル シートが埋め込まれた複数のページを維持するために必要な作業は、はるかに負担が大きくなります。どのページでも CSS ルールを 1 つでも変更するたびに、すべてのページでその変更を行い、それらすべてのページを再度アップロードする必要があることに注意してください。そうしないと、サイト全体で個々のページの書式が異なることになります。

外部リンク スタイル シートは、この問題を防ぎます。1 つのスタイル シート、1 つのファイルを修正してアップロードします。ページの読み込みや応答が遅くなる可能性があると私が考えることができる唯一のことは、次のとおりです。

  • 非常に大きなスタイル シート
  • 「リンク」コマンドの代わりに「インポート」を使用する (一部のブラウザーは、これらのコマンドに対して異なる反応を示します)
  • 非標準の CSS または非常に密度の高いスタイリング コマンドを使用しています。

CSS を見ないと、これ以上の提案はできません。ブラウザは最初に 2 つのファイルをロードする必要があるため、動作が少し遅くなります。しかし、サイト全体の動作が遅くなる理由を理解するのは困難です。

以下にいくつかの提案を示します。

  • 他のブラウザーや他のコンピューターでページをチェックしてテストしましたか? 多分それはまったくページではありません。多分それはあなたが使用しているブラウザまたはコンピュータです。
  • スタイル シートが大きい場合は、論理的なコンポーネントに分割します。テーブル、フォーム、およびすべてのページに表示されない特別なコンポーネントをフォーマットするスタイル シートがあります。そのページに関連する CSS のみを読み込みます。メインのスタイル シートを 1 つ用意してから、前述のような特定の種類のコンポーネントに特化したスタイル シートを作成します。
  • 使用しているコマンドの種類を確認してください。カスケード、継承、および特異性を最大限に活用していますか? できるだけ効率的な CSS を作成するようにしてください。

埋め込みスタイル シートを保持することは、最初は簡単かもしれませんが、埋め込みスタイル シートを含む大規模な Web サイトを更新および維持することは、はるかに面倒です。

それが役立つことを願っています。

于 2012-06-14T14:32:28.480 に答える