現狀
現在瀏覽器css匹配核心演算法的規則都是是以right-to-left
方式匹配節點的。
如.root .sub span {...},瀏覽器渲染方式是 span -> .sub -> .root
它的讀取順序變成:先找到所有的span
,沿著span
的父元素查詢.sub
,再找.root
,中途找到了符合匹配規則的節點就加入結果集;如果直到根元素html都沒有匹配,則不再遍歷這條路徑,從下一個span
開始重複這個過程。
舉例
如果整個html
只有一個span
標籤,那right-to-left
方式的確是最快的,但是往往大部分網頁都不只一個span
標籤,多個span
標籤將會有很多無效的匹配,那這時是不是left-to-right
會更好一點。
案例:
<html>
<div class="root">
<div class="sub"><span>1</span></div>
</div>
<div>
<div><span>2</span></div>
</div>
<div>
<span>3</span>
</div>
<span>4</span>
</html>
複製程式碼
.root .sub span {}
複製程式碼
right-to-left
解析
先找到所有的最右節點span
,有4個,對於每一個 span
,向上尋找節點發現不是.sub
,在查詢上上節點,直到找到html
,發現沒有符合的。再從下一個span
開始重複這個過程。
上面情況有4個span
至少有4個分支的往上遍歷。假如有 1000 個 不在.sub
中的span
,就有 1000 次的分支遍歷,而符合條件的只有1個,會損失很多效能。
left-to-right
解析
從 .root
開始,遍歷所有子節點,如果沒有找到.sub
,回溯到上個節點接著遍歷,直到找到.sub
,再遍歷.sub
下的子節點找到span
結束。
上面情況1次就能找到符合條件的span
。
上面案例明顯left-to-right
比right-to-left
解析效率更高。
當然也有情況是,如果.root
下面有很多複雜子節點,需要遍歷與回溯很多次,而.root
外的span
不多,則right-to-left
解析效率更高。
提案
大部分書寫習慣是不想每個html
標籤都加class name
,可以用不同html
標籤選擇出來的。如下所示:
<div>
<div id="sub">
<span>1</span><label>2</label><div>3</div>
</div>
... <!-- 裡面有很多span,label,div標籤 -->
</div>
複製程式碼
#sub span{}
#sub label{}
#sub>div{}
複製程式碼
先找到#sub
再找html
標籤的話,css解析效率會高些。
那麼left-to-right
比right-to-left
解析效率高。
所以提案如下:
假設最後一個css元素是html標籤,而父元素有ID或Class選擇器時,則選擇器解析從左往右的,其他情況還是從右往左。
Ps:這裡本妹子的一個想法,歡迎各位小夥伴們一起討論,如果大部分都覺得有道理的話,我想試著向
w3c
組織提出建議需求。
其他連結
Happy coding .. :)