成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

假設(shè)最后一個css元素是html標(biāo)簽，則選擇器解析從左往右的提案

Invoker / 3430人閱讀

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

現(xiàn)狀

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

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

舉例

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

案例：


  

    
1

  

  

    
2

  

  

    3
  

  4

.root .sub span {}

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

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

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

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

提案

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


  

    1
3

  

  ...  

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

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

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

Ps：這里本妹子的一個想法，歡迎各位小伙伴們一起討論，如果大部分都覺得有道理的話，我想試著向w3c組織提出建議需求。
其他鏈接 
原文地址：https://raoenhui.github.io/css/2019/03/30/left-to-right

Happy coding .. :)

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116048.html

相關(guān)文章

  • 從css到頁面樣式渲染

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

    Nekron 評論0 收藏0

  • 校招進行時（四）---css基礎(chǔ)

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

    isLishude 評論0 收藏0

  • WEB前端面試題匯總（CSS）

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

    qpwoeiru96 評論0 收藏0

  • 前端培訓(xùn)-中級階段（6）- jQuery元素節(jié)點操作（2019-07-18期）

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

    taoszu 評論0 收藏0

  • 前端培訓(xùn)-中級階段（6）- jQuery元素節(jié)點操作（2019-07-18期）

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

    tigerZH 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<