外部樣式表與添加JavaScript的樣式標簽

Question

我有多個可添加到各種網頁的小部件。 每個都有自己的樣式表：

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

樣式表特定於每個窗口小部件，並且非常簡短（5至10個聲明）。

我正在考慮在腳本中動態創建樣式表，這有兩個原因：

像這樣的東西，插入了widget1.js中：

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

這有什么問題嗎？ 這對我來說聽起來是個好主意，但是當我查看其他示例（例如jQuery插件）時，css和js始終位於單獨的文件中。

Answer 1

這對HTTP請求完全沒有幫助。 使用JavaScript向外部樣式表添加鏈接仍然需要HTTP請求來獲取它。

您可能最好使用YUI Compressor之類的工具來合並和最小化您在單個CSS文件中使用的所有小部件的樣式表。 然后將其包含在每個頁面中，並讓瀏覽器對其進行緩存。

Answer 2

用一個替換兩個http請求應該可以提高性能

如果您將CSS放在其自己的文件中，則瀏覽器可以對其進行緩存，從而提高性能。 使用JavaScript創建它最終將產生一個更大的JS文件，並且無法緩存它（CSS）。 另外，JavaScript將必須生成CSS，從而降低性能。

Answer 3

我的最終選擇是從腳本中創建樣式表。

除了減少http請求的數量外，主要的好處實際上是您可以在注入樣式表之前對其進行調整。 這對於小部件特別有用，因為您可以在運行時調整類名稱，顏色或大小。

從更大的角度來看，這就是LESS和SASS之類的某些庫正在做的事情。

Answer 4

如果要創建新的樣式元素，為什么不將其代碼放入它會影響的js小部件文件中？