CSS類名稱長度是否影響瀏覽器性能？

例如：Gmail。CSS類名稱長度是否影響瀏覽器性能？

從所有DOM元素來看，〜2000至少有一個CSS類，並且頁面上共有約500個不同的CSS類名。 Gmail使用閉包樣式表來縮小/醜化他們的CSS類名。這一步是否會提高瀏覽器的性能？我想分析/評估HTML/CSS代碼，選擇匹配等變醜類名

舉例：「ABC」的原班名
例：「tooblar__button - 禁用」

來源

2014-05-06 Šime Vidas

除了下載大小的小改進？我不認爲這很重要。 –

在其他地方可以找到更大的收益，一個人就會想到精靈。儘管如此，我想如果你使用較小的類名稱，你已經耗盡了所有其他優化途徑。 – MackieeE

更長的名稱會增加下載時間，是的，但也會佔用內存。我想也有對此的優化，或者說，如果你使用了最多X個字符，它並不重要，因爲它們爲每個類分配了內存中的字節。 – PhistucK

是的。更少的字節是更少的字節。它是一個顯着因素的機會是微不足道的。

來源

2014-05-06 14:40:20 Quentin

是的，但這很像是說在海里倒一杯水可以提高水位。雖然技術上是真的，但它實際上也沒有意義。（谷歌最大限度地減少了CSS，因爲它會影響文件的加載時間。） – JJJ

這並不重要，這對我來說是違反直覺的。選擇器匹配是一個複雜的過程，因爲幾乎每個DOM元素都必須針對每個CSS選擇器進行測試。 –

@ŠimeVidas您的電腦還可以在一秒鐘內完成數百萬計算。無論是處理有20個字符或3個字符的字符串，都沒有任何明顯的差異。 – JJJ

這並不會影響瀏覽器的性能，也不會像加載時間那樣影響性能。渲染時間有顯着的差異，但只有在長度差異很大時才能測量，即使這種差異很小。請看this JSPerf，它對兩個類名稱長度都進行測試。長名稱在執行速度方面有輕微的缺點。這可能會在修改樣式很多次時產生變化，但在普通網站上，這種差異太小而不會被注意到。

來源

2014-05-06 14:41:19 Joeytje50

你如何看這個？它有100k課嗎？我們在談論什麼時候有什麼區別？那傳輸時間呢？ – Ced

如果您查看該鏈接，則可以運行性能測試，這會向您顯示長類名需要稍長的時間才能使用。這個差別絕對不是幾秒鐘，而是幾毫秒，甚至更少，但是當測試這段JavaScript幾千次時，就會有一些細微的差別。如果這不能回答你的問題，恐怕我不明白你的問題。如果是這樣，請問您可以重述這個問題嗎？ – Joeytje50

當我運行測試時，長名稱的速度很快。 [見結果]（http://i.imgur.com/pIzGWzj.png）。可能安全地得出這樣的性能測試毫無意義的結論嗎？ – Medorator

CSS類名稱長度是否影響瀏覽器性能？

回答

相關問題