日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
CSS元素選擇器是怎樣運(yùn)作的？

在前端工程師的日常工作中，使用 CSS 元素選擇器是稀松平常的事；無論你是編寫一般的 CSS 還是需要經(jīng)過編譯的 SASS，SCSS，LESS等，最終都被編譯成一行一行的 CSS 樣式屬性，最終交給瀏覽器解析并套用。但是你想過沒有這是如何實(shí)現(xiàn)的呢?

瀏覽器渲染

我們先看一下瀏覽器的渲染步驟：

CSS 在被瀏覽器加載后，會(huì)被解析成 CSSOM 樹，并嘗試與 Dom 疊加成渲染樹，隨后進(jìn)行計(jì)算位置、渲染等步驟。這樣看來，CSS 屬性套用的關(guān)鍵就在于如何從 CSS 轉(zhuǎn)化成 CSSOM 樹，以及怎么把 CSSOM 套用到 DOM 上去。

CSSOM樹

當(dāng)我們寫下一組 CSS 樣式時(shí)，例如：

 
 
 
 
    
  
  
  
  
  1. #id .class h4 + p { 
    2. 
  
  
  
  
  2.    ... 
    3. 
  
  
  
  
  3. } 
    4.

瀏覽器在解析它時(shí)，你可能會(huì)認(rèn)為 CSS 會(huì)按照由左到右的依序找出#id>.class>h4>p，最后套用，但實(shí)際上瀏覽器解析 CSS 的順序是由右到左的 p>h4>.class>#id。

很違背直覺對(duì)吧?但如果考慮到性能問題，從右到左的解析會(huì)比從左到右強(qiáng)很多。

假設(shè)這有這樣的 HTML：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3.          
    4. 
  
  
  
  
  4.             ... 
    5. 
  
  
  
  
  5.         
 
  •          
  •              
  •                 ... 
  •             
    •  
  •              
  •                 ... 
  •             
    •  
  •         
    •  
  •     
    •  
  •      
  •          
  •              
  •                 ... 
  •             
    •  
  •         
    •  
  •     
    •  
  •  

    以及這邊五條 CSS 樣式規(guī)則：

     
 
 
 
      
  
  
  
  
    1. #div1 .c .d {} 
      2. 
  
  
  
  
    2. .f .c .d {} 
      3. 
  
  
  
  
    3. .a .c .e {} 
      4. 
  
  
  
  
    4. #div1 .f {} 
      5. 
  
  
  
  
    5. .c .d {} 
      6.

    讓我們模擬一下，如果把 CSS 從左到右解析，將會(huì)生成類似這樣的 CSSOM 樹：

    通過

    中的 .d 來思考，這樣的 CSSOM 樹在套用樣式時(shí)，必須對(duì)所有的樣式規(guī)則進(jìn)行檢查，以確認(rèn)樣式規(guī)則是否會(huì)影響到 .d，到最后才能確定可能會(huì)影響到 .d 的樣式規(guī)則有這三條：

    • #div1 .c .d
    • .f .c .d
    • .c .d

    以此類推，每個(gè) DOM 樹上的元素，都必須便利所有的樣式規(guī)則，才可以取得個(gè)別的樣式，這樣會(huì)造成大量冗余的計(jì)算，進(jìn)而嚴(yán)重影響性能。

    反過來，如果將前面的 CSS 由右到左進(jìn)行解析，CSSOM 樹則可能會(huì)如下：

    和前面的例子一樣，從

    中 .d 的角度來看，由于會(huì)被樣式規(guī)則影響到的目標(biāo)元素，已經(jīng)全都集中在第一層了，所以就不用再去便利整個(gè) CSSOM 樹了，甚至只需要檢查 .d 以下的子屬性變量是否符合實(shí)際 DOM 結(jié)構(gòu)，再將所有符合的樣式規(guī)則重新取回，便能完成 .d 對(duì)元素的樣式規(guī)則套用。

    從右到左的解析順序能夠?qū)⑺泄蚕淼囊?guī)則路徑收攏在一起，當(dāng)瀏覽器進(jìn)行屬性比對(duì)時(shí)，就不用再便利整個(gè) CSSOM 樹，大大的減少了無效的比對(duì)計(jì)算。

    也可以換個(gè)方式思考：在 HTML 的結(jié)構(gòu)中，一個(gè)元素可以有無數(shù)個(gè)子元素，但只能有一個(gè)父元素，由子找父(由下往上)搜尋絕對(duì)是比較快的。

    1. 套用樣式

    將 CSSOM 樹解析出來之后就能夠和 DOM 結(jié)合了嗎?如果真的有這么簡(jiǎn)單就太好了。

    除了開發(fā)者定義好的 CSS 檔外，還有幾個(gè)地方可能會(huì)定義樣式規(guī)則，影響畫面的渲染：

    • HTML 的 inline style 設(shè)置
    • 瀏覽器預(yù)設(shè)值(就是 CSS reset/normalize 要覆蓋掉的東西)
    • 瀏覽器的使用者偏好設(shè)定

    瀏覽器負(fù)責(zé)處理 CSS 的部分，會(huì)吧前面所有的東西以及 CSS 文件定義的樣式規(guī)則分別整理成單獨(dú)的樣式規(guī)則組(CSS 規(guī)則集)，內(nèi)容記載了樣式規(guī)則、目標(biāo)屬性等信息。

    2. 目標(biāo)屬性

    為了提升后面的計(jì)算效率，瀏覽器的 CSS 處理內(nèi)核會(huì)按照樣式規(guī)則組中個(gè)別規(guī)則的目標(biāo)屬性將其分組存放;一共分為以下四組

    • idRules
    • classRules
    • tagNameRules
    • universalRules

    這樣在取用時(shí)，可以依據(jù)目標(biāo)元素是否存在這個(gè)屬性，快速篩出可能會(huì)套用的樣式。

    套用規(guī)則

    最后是套用規(guī)則。瀏覽器會(huì)遵循以下順序和樣式規(guī)則權(quán)重套用所有的樣式規(guī)則：

    • 瀏覽器的預(yù)設(shè)值
    • 瀏覽器的使用者偏好設(shè)定
    • 開發(fā)者定義的 CSS
    • inline style
    • 加上 !important 的樣式屬性

    你可能會(huì)好奇：為什么 inline style 和開發(fā)者定義的 CSS 會(huì)被另外處理?

    我們可以回顧一下瀏覽器渲染的步驟，由于 inline style 存在于 DOM 元素中，只能在 CSS 套用到 DOM 上時(shí)才會(huì)接觸到，事前無法將兩者結(jié)合。

    CSS 效率

    實(shí)際上瀏覽器在這里已經(jīng)完成了優(yōu)化機(jī)制;瀏覽器會(huì)自動(dòng)將狀態(tài)一致的元素做樣式快照。狀態(tài)一致就是要滿足以下幾個(gè)條件：

    • 沒有設(shè)定 ID
    • tag 及 class 必須完全一致
    • 沒有設(shè)定 style 屬性
    • 樣式規(guī)則中不能使用各種同級(jí)選擇器(例如：?，+，:first-child 等)

    由于上面的條件，以及前面討論到的 CSS 運(yùn)算過程，編寫 CSS 時(shí)也有幾個(gè)地方可以稍微留心一下：

    • 由于樣式規(guī)則的目標(biāo)屬性會(huì)分組存放，id 選擇器效率非常高，所以是不能與其他條件混用的。
    • 不要寫過深的 CSS 樣式規(guī)則
    • 能不用 inline style 就不要用，除了難以維護(hù)外，由于是存在于 DOM 樹上，無法預(yù)先與其他樣式合并計(jì)算，所以效率也會(huì)大打折扣

    如果能夠注意到這類典型的小細(xì)節(jié)，CSS 效率自然也可以大幅提升。


    網(wǎng)站標(biāo)題：CSS元素選擇器是怎樣運(yùn)作的？
    本文來源：http://m.5511xx.com/article/djipohe.html