覆蓋CSS樣式的性能影響

Question

出於性能原因，我正在爲網頁設置圖像集羣（類似於精靈圖）。我有一個生成主圖像的實用程序，而css引用圖像映射。

爲了簡單起見，我寧願在常規css文件後包含新的css，而不是編寫腳本來搜索並替換原始css中的所有類。像這樣在HTML（僞代碼）：

<LINK href="normal.css" rel="stylesheet" type="text/css"> 

if(%=usingImageCluster=%) 
     <LINK href="master.css" rel="stylesheet" type="text/css"> 

所以在normal.css中定義的所有樣式將在master.css新的樣式得到覆蓋。

幾個問題：

• 除了信息的「複製」，這是否覆蓋導致性能問題？

• 由於原始CSS文件仍然包含在內（否定圖像集羣的正面性能增益），瀏覽器是否仍會拉取非集羣映像？

• 是否有保證最後加載的樣式總是應用的樣式？

Answer 1

除了信息的「複製」，這是否覆蓋導致性能問題？

是的，您正在爲第二個外部樣式表生成一個新的HTTP請求。太多HTTP請求是大多數網頁排名第一的因素。

由於仍然包含原始的CSS文件（否定了圖像集羣的正面性能增益），瀏覽器是否仍然拉取非集羣映像？

是的，瀏覽器將拉動全部來自第一個和第二個CSS文件的圖像。演奏時間將幾乎線性增加（近似）。特別是如果你正在重寫每一個CSS選擇器，或更改大量的圖像。

是否有保證上次加載的樣式總是應用的樣式？

是的。除非第一張表對某些樣式屬性使用!important，否則將始終應用選擇器的最後聲明樣式。這是Cascading Style Sheets獲得他們的名字的地方。