什麼是更快：更多的類或獨特的類

我使用2種方式，但我更喜歡第一個由於重用代碼。有些更喜歡一個或其他。但是我想知道大型程式化頁面中的負載是否比另一種更好。什麼是更快：更多的類或獨特的類

1）

<style> 
    .red{ color:red} 
    .right25{ margin-right: 25px} 
    .bold{ font-weight:bold} 
</style> 

<p class="red right25 bold">this is a red text, bold and right margin 25px</p>

2）

<style> 
    .class1{ color:red; margin-right: 25px; font-weight:bold} 
</style> 

<p class="class1">this is a red text, bold and right margin 25px</p>

來源

2014-09-22 Rogerpec

你不會注意到速度的差異。選擇一個能夠讓你的代碼更好地組織起來並且更加可重用的代碼。 – 2014-09-22 17:48:30

我不會推薦使用像'.red'和'.right25'這樣的類名。類名的全部觀點是，您可以在不訪問任何風格的情況下更改CSS的含義，只要您這樣做，您的風格名稱就會令人難以置信地誤導 - 弄亂了使用樣式名稱的整個想法。你應該使用'.header'和'.product'等類名稱，然後爲這些類型的名稱分配多個樣式來定義你希望如何查看該類別的對象。 – jfriend00 2014-09-22 17:52:45

至於性能差異，它可能可以忽略不計。如果你真的想知道，你將不得不創建一個真實世界的代表性測試，並實際測量（如所有與性能相關的問題）。但是，在這裏優化代碼遠遠比任何可能的性能差異都重要得多。 – jfriend00 2014-09-22 17:55:22

這取決於有多少，你實際上可以重用的代碼，但性能差別不會說大。

這些方法之間最大的區別在於類的含義。一般來說，你應該有代表你想要展示的東西的類，而不是你用什麼樣式來展示它。表示意圖而非實施的名稱在進行更改時會更好。

例如，如果您有right25類，並且希望將邊距更改爲20像素，那麼您要麼具有不代表實際功能的類名，要麼必須將其更改爲right20你使用它。

來源

2014-09-22 17:54:48 Guffa

你絕對在談論第一種方法可能比第二種方法慢？

回答：造型CSS的速度沒有區別。

爲了說明：

div{ 
    color: blue; 
    padding: 10px; 
} 
div{ 
    color: red; 
    font-size: 16px; 
    padding-left: 5px; 
}

當施加在規則的CSS，以下CSS將被瀏覽器應用：

div{ 
    color: red;/*later one*/ 
    font-size: 16px; 
    padding: 10px 10px 10px 5px;/*padding-left 5px is taken from later rule*/ 
}

和由瀏覽器在所解析的同時div從樣式表中取樣。

爲什麼沒有區別？

在任何其他編程語言如JavaScript中，如果一行發生錯誤，則另一行不會運行，因此從該行代碼解釋器將不會讀取整個代碼。

但是在css語言中，即使您編寫規則，即使HTML沒有這樣的類或ID，也沒有問題，即使您的樣式表中存在一些錯誤，讀取下一行代碼也沒有問題，無論瀏覽器如何加載整個樣式表文件並讀取代碼，並在同一時間（當樣式表完全加載時）提供輸出，並且您的代碼在速度上似乎沒有任何差異。

_{順便說一句，它可能會更慢（即使你無法捕捉到你的眼睛），因爲樣式表通過代碼行下載了行，因此在32kbps以下的網絡連接速度較慢。}

來源

2014-09-22 18:04:54

兩個是你的答案。瀏覽器從右到左讀取每個類。閱讀一堂課比閱讀兩堂課要快。

http://csswizardry.com/2011/09/writing-efficient-css-selectors/

http://css-tricks.com/efficiently-rendering-css/

使用外部stlye片。瀏覽器可以緩存。

http://www.w3schools.com/css/css_howto.asp

來源

2014-09-22 18:19:43 Xm7X

什麼是更快：更多的類或獨特的類

回答

相關問題