假設最後一個css元素是html標籤,則選擇器解析從左往右的提案

現狀

現在瀏覽器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 {}

domTree.png

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 .. :)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章