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

Invoker 發(fā)布于2019-08-30 15:43 / 3426人閱讀

摘要：假如有個不在中的，就有次的分支遍歷，而符合條件的只有個，會損失很多性能。提案大部分書寫習慣是不想每個標簽都加，可以用不同標簽選擇出來的。所以提案如下假設最后一個元素是標簽，而父元素有或選擇器時，則選擇器解析從左往右的，其他情況還是從右往左。

現(xiàn)狀

現(xiàn)在瀏覽器css匹配核心算法的規(guī)則都是是以 right-to-left 方式匹配節(jié)點的。

如.root .sub span {...}，瀏覽器渲染方式是 span -> .sub -> .root
它的讀取順序變成：先找到所有的span，沿著span的父元素查找.sub,再找.root，中途找到了符合匹配規(guī)則的節(jié)點就加入結果集；如果直到根元素html都沒有匹配，則不再遍歷這條路徑，從下一個span開始重復這個過程。

舉例

如果整個html只有一個span標簽，那 right-to-left 方式的確是最快的，但是往往大部分網頁都不只一個span標簽，多個span標簽將會有很多無效的匹配，那這時是不是 left-to-right 會更好一點。

案例：

.root .sub span {}

right-to-left 解析
先找到所有的最右節(jié)點 span，有4個，對于每一個 span，向上尋找節(jié)點發(fā)現(xiàn)不是.sub,在查找上上節(jié)點，直到找到html，發(fā)現(xiàn)沒有符合的。再從下一個span開始重復這個過程。
上面情況有4個span至少有4個分支的往上遍歷。假如有 1000 個不在.sub中的span，就有 1000 次的分支遍歷，而符合條件的只有1個，會損失很多性能。

left-to-right 解析
從 .root 開始,遍歷所有子節(jié)點，如果沒有找到.sub，回溯到上個節(jié)點接著遍歷，直到找到.sub，再遍歷.sub下的子節(jié)點找到span結束。
上面情況1次就能找到符合條件的span。

上面案例明顯 left-to-right 比 right-to-left 解析效率更高。

當然也有情況是，如果.root下面有很多復雜子節(jié)點，需要遍歷與回溯很多次，而.root外的span不多，則 right-to-left 解析效率更高。

提案

大部分書寫習慣是不想每個html標簽都加class name，可以用不同html標簽選擇出來的。如下所示：

#sub span{}
#sub label{}
#sub>div{}

先找到#sub再找html標簽的話，css解析效率會高些。
那么 left-to-right 比 right-to-left 解析效率高。
所以提案如下：

假設最后一個css元素是html標簽，而父元素有ID或Class選擇器時，則選擇器解析從左往右的，其他情況還是從右往左。

Ps：這里本妹子的一個想法，歡迎各位小伙伴們一起討論，如果大部分都覺得有道理的話，我想試著向w3c組織提出建議需求。

其他鏈接

原文地址：https://raoenhui.github.io/css/2019/03/30/left-to-right

Happy coding .. :)

GPU云服務器云服務器元素選擇器 css選擇器 js 子類元素選擇器基礎選擇器css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116048.html

從css到頁面樣式渲染

摘要：對應多種語法規(guī)則可以為指定樣式。渲染頁面繪制到屏幕后，頁面結構的改變也有可能導致渲染樹重新計算，其中重排和重繪是最耗時的部分。寫了這么多class,color,background,display...; 也許有時候會疑惑，怎么就顯示在頁面上，改變元素的樣式。本文簡明介紹整個解析，匹配，渲染過程 css 描述 css 是Cascading Style Sheets的簡寫，是一種樣式...

Nekron 2019-08-30 15:43 評論0 收藏0
校招進行時（四）---css基礎

摘要：在中，使用標準盒模型描述這些矩形盒子中的每一個。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。最常見的有簡稱和簡稱。其中列是真正顯示文檔內容的元素。同時其還支持列的偏移，即可以不從第一列開始，將某幾列作為空隙。恩，小菜鳥又來了，上篇文章在這，話不多說，這次羅列總結一下css基礎知識，和我一樣的菜鳥可以看看。引入方式 css的引入方式主要有以下幾種：外...

isLishude 2019-08-29 12:59 評論0 收藏0
WEB前端面試題匯總（CSS）

摘要：默認值，沒有定位，元素出現(xiàn)在正常的文檔流中。生成粘性定位的元素，容器的位置根據正常文檔流計算得出。和屬性的異同共同點對內聯(lián)元素設置和屬性，可以讓元素脫離文檔流，并且可以設置其寬高。 position的值， relative和absolute分別是相對于誰進行定位的？、relative:相對定位，相對于自己本身在正常文檔流中的位置進行定位。、absolute:生成絕對定位，相對于最近一...

qpwoeiru96 2019-08-29 12:39 評論0 收藏0
前端培訓-中級階段（6）- jQuery元素節(jié)點操作（2019-07-18期）

摘要：已存在節(jié)點是移動，新節(jié)點是新增。鏈式操作對象為。將他們的父節(jié)點移除。從中刪除所有匹配的元素。一個布爾值或者指示事件處理函數是否會被復制。以上版本默認值是一個布爾值，指示是否對事件處理程序和克隆的元素的所有子元素的數據應該被復制。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經遠遠不止這些。前端小課堂（HTML/...

taoszu 2019-08-02 15:24 評論0 收藏0
前端培訓-中級階段（6）- jQuery元素節(jié)點操作（2019-07-18期）

摘要：已存在節(jié)點是移動，新節(jié)點是新增。鏈式操作對象為。將他們的父節(jié)點移除。從中刪除所有匹配的元素。一個布爾值或者指示事件處理函數是否會被復制。以上版本默認值是一個布爾值，指示是否對事件處理程序和克隆的元素的所有子元素的數據應該被復制。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經遠遠不止這些。前端小課堂（HTML/...

tigerZH 2019-08-23 18:22 評論0 收藏0