標籤：

css命名長度對查找效率有影響嗎？

01-07

忽略層級

CSS名字太長的話會有問題嗎？

首先要看一下瀏覽器是怎麼處理CSS選擇器的，它會先把CSS文本格式化成styleRule對象，如：

#world {
margin: 20px;
}

會變成：

selector text = 「#world」

value = 「world」 matchType = 「Id」 relation = 「SubSelector」

上面包含了選擇器的type和value，由於它是一個ID選擇器，會被放到一個ID的哈希Map裡面，有四個哈希map，如下所示：

CompactRuleMap m_idRules; //ID
CompactRuleMap m_classRules; //類名
CompactRuleMap m_tagRules; //標籤
CompactRuleMap m_shadowPseudoElementRules; //偽類

如果要查找某個選擇器的樣式屬性的話就在哈希map裡面進行查找，哈希的查找時間是O(1)常數的，所以會比較快。

CSS名字太長對上述過程會有兩個影響：

  1. 解析CSS選擇器名字時循環字元要長一些
  2. 計算哈希的時間會長一點，因為瀏覽器如Chrome對字元串哈希演算法是循環每個字元串累計哈希值(running_hash)，所以循環計算的時間也要長一點，但由於哈希的過程是位運算，位運算是很快的。可參考以下代碼：

uint32_t StringHasher::AddCharacterCore(uint32_t running_hash, uint16_t c) {
running_hash += c;
running_hash += (running_hash &<&< 10); running_hash ^= (running_hash &>&> 6);
return running_hash;
}

由於上面兩個處理都是循環字元串然後做些簡單處理，時間是O(N)的，數據量幾和幾十的時間差是很小的，你類的名字長度不可能千級萬級吧。

類名長的話，你的html相應地也要變大，一個類名50個字元，還寫了100個，每個後面有跟子選器規則的有10個，光是這些類名就有50k了。先別說體積，自己敲著都累，一般也不會搞得這麼奇葩吧。

所以在性能方面應該不用擔心類名長的問題，你的類名應該簡單易懂，就跟變數命名一樣，要是搞太長，自己敲起來累，看起來也累，可能像做閱讀理解一樣。如會飛的豬就搞一個.flying-pig就好了，不要搞一個.flying-in-the-sky-pig的類，可以說效率方面的影響是比較微小的，但看起來累啊。

影響可以忽略不計，要是真較真的話 是有影響的

1 文件體積增大導致載入速度變慢

html 寫長的className比短的體積要大，同理css，js文件也會增大

2 查詢效率變慢

不管瀏覽器怎麼使用樣式的，肯定是要匹配到className的 需要用到字元串比較 字元串比較需要足個字元比較 短的顯然比長的速度要快一些

3 過度長對開發者不友好

試想下你的class name 都是 layout-search-sn-type 這樣的名字，你實際記住的可能只有sn-type 在你用到的地方都要腦補layout-search- 直接影響了你的開發效率，還很容易打斷你的思路

對程序來說幾乎沒有，你總不能長到幾kb的程度吧，對人來說當然是要語義化才行，推薦英語和短橫線靈活運用，忌諱中文拼音數字或者亂打字母這些。

有影響，但是不該你考慮。所以你應該當作沒影響

一般來說你瓶頸期還到不了這裡

:hover :before :after這些偽類選擇器性能不及id class甚至也沒有很多人喜歡的addClass("hover")好

還不是一群人在用

你一個頁面除非特複雜 能有多少dom元素有多少css 先優化dom再考慮css的命名吧

長度不知道咧。我們公司大牛的研究結果是，從右往左查，所以少些.a p,span之類的，最後的別標籤結尾。然後層級不要太深，超過5級。

推薦閱讀：

TAG:HTML | CSS | JavaScript | Less | Sass |