外部スタイルシートとJavaScriptが追加されたスタイルタグ

私はさまざまなWebページに追加できる複数のウィジェットを持っています。それぞれが独自のスタイルシートが付属しています：外部スタイルシートとJavaScriptが追加されたスタイルタグ

<link type="text/css" href="http://mySite/widget1.css" /> 
<script type="text/javascript" src="http://mySite/widget1.js"></script>

スタイルシートは各ウィジェットに固有の（5〜10宣言）非常に短いです。私は2つの理由から、スクリプト内で動的に作成スタイルシート、持っ検討しています

：

widget1.jsに挿入されたこのような何か、：

var stylesheet=document.createElement("style"); 
stylesheet.innerHTML="#slideshow{width:500px;..."; 
etc...

これには何か問題がありますか？これは私にとっては良い考えですが、jQueryプラグインのような他の例を見ると、cssとjsは常に別々のファイルにあります。

2012-02-15 Christophe

DOMにリンク要素を追加すると、それが要求され、要求されるため、依然として2つの要求があることに注意してください。 5-10の宣言しかない場合は、インラインで行い、スタイルシートについて心配する必要はありません。 –

@BrianGlaz申し訳ありませんが、私はすぐに私の例がすべて間違っていることを認識し、問題を修正しました。 – Christophe

私の最終的な選択は、スクリプト内からスタイルシートを作成することでした。

HTTPリクエストの数を減らすことに加えて、実際には、それを注入する前にスタイルシートを調整できるという大きな利点があります。これは実行時にクラス名、色、サイズを調整できるので、ウィジェットに特に便利です。

これは、LESSやSASSのようなライブラリの規模が大きくなるためです。

2013-03-30 18:58:06 Christophe

これは、HTTPリクエストではまったく役に立ちません。 JavaScriptを使用して外部スタイルシートにリンクを追加するには、まだHTTPリクエストを取得する必要があります。

YUI Compressorのようなものを使用して、1つのCSSファイルに使用するすべてのウィジェットのスタイルシートをマージして縮小する方がよいでしょう。それをすべてのページに組み込み、ブラウザにキャッシュさせます。あなたは、独自のファイルにあなたのCSSを使用している場合は1と

2012-02-15 21:05:28 Quentin

申し訳ありませんが、私はすぐに私の例がすべて間違っていることを認識し、問題を修正しました。 – Christophe

交換する2つのHTTP要求は、ブラウザは、このようにパフォーマンスが向上し、それをキャッシュすることができ、パフォーマンスの向上

を持参してください。 JavaScriptを作成すると、JSファイルが大きくなり、CSS（CSS）をキャッシュできなくなります。また、JavaScriptはCSSを生成する必要があるため、パフォーマンスが低下します。

2012-02-15 21:05:59

キャッシュしても、httpリクエストがあります。スタイルシートのサイズのため、HTTPリクエストで無駄になった時間がロード時間よりも心配です。 – Christophe

キャッシュされている場合、HTTPリクエストがないか、データだけでなくヘッダーが取得されることは間違いありません。サーバーが応答速度が遅い場合を除き、「時間の無駄」は問題にはなりません。 –

新しいスタイル要素を作成する場合は、のコードをjsウィジェットファイルに入れて、影響を与えるのはなぜですか？

2012-02-15 21:34:52 kennebec

はい、それはアイデアです（質問ではあまり説明されていません...）。スタイル要素を作成するコードはwidget1.jsに入ります。私は投稿を修正しました。 – Christophe

答えて