【winter重學前端筆記13】瀏覽器：一個瀏覽器是如何工做的？CSS計算

加載css

• 加載是異步，不會影響DOM樹的構建，只是說在CSS沒處理好以前，構建好的DOM並不會顯示出來

  • 啓發：因此CSS不能太大，頁面一打開將會停留較長時間的白屏，因此把圖片/字體等轉成base64放到CSS裏面是一種不太推薦的作法

• DOM去匹配css rule的時候必須先等頁面的css都下載完成

  • 啓發：head中的css是要下載完的，body中放CSS的話，會從新計算

css語法：選擇器

• 在9課程中能夠了解更多選擇器：compound-selector
• 特色(css設計原則)：選擇器的出現順序，一定跟構建 DOM 樹的順序一致，即：保證選擇器在 DOM 樹構建到當前節點時，已經能夠準確判斷是否匹配，不須要後續節點信息 - 將來不可能會出現「父元素選擇器」這種東西

• 流式渲染，每生成一個dom節點，便馬上去匹配相應的css規則

  • 空格: 後代，選中它的子節點和全部子節點的後代節點

  • : 子代，選中它的子節點

  • +：直接後繼選擇器，選中它的下一個相鄰節點
  • ~：後繼，選中它以後全部的相鄰節點
  • ||：列，選中表格中的一列
• winter不講怎麼解析css規則啦，詞法分析和語法分析不作贅述

cssom

• CSSOM主要是DOM結構上的盒的描述，它基本上是依附於DOM樹的，不要和css的語法樹混淆
• cssom是有rule部分和view部分的，rule部分是在dom開始以前就構件完成的，而view部分是跟着dom同步構建的。

css選擇器匹配流程

前進：一個 CSS 選擇器按照 compound-selector來拆成數段，每當知足一段條件的時候，就前進一段。

後退：選擇器的做用範圍，匹配到本標籤的結束標籤時（做用範圍邊緣）回退。

• 後代選擇器 「空格」
  規則：

  • 前進：找到了匹配 a#b 的元素時，咱們纔會開始檢查它全部的子代是否匹配 .cls(前進到.cls)
  • 後退：當遇到 時，必須使得規則 a#b .cls 回退一步(回退到a#b)這樣第三個 span 纔不會被選中 - 後代選擇器的做用範圍是父節點的全部子節點，所以規則是在匹配到本標籤的結束標籤時回退。

• a#b .cls {

  width: 100px;
  }
  
  <a id=b>
      <span>1<span>
      <span class=cls>2<span>
  </a>
  <span class=cls>3<span>

• 後繼選擇器「 ~ 」
  規則：給選擇器的激活- 帶上一個條件：父元素
  緣由：後繼選擇器只做用於一層.按照 DOM 樹的構造順序，4 在 3 和 5 中間，咱們就沒有辦法像前面講的後代選擇器同樣經過激活或者關閉規則來實現匹配
  過程：當前半段的 .cls 匹配成功時，後續 * 所匹配的全部元素的父元素都已經肯定了（後繼節點和當前節點父元素相同是充分必要條件

  .cls~* {
      border:solid 1px green;
  }
  <div>
  <span>1<span>
  <span class=cls>2<span>
  <span>
      3
      <span>4</span>
  <span>
  <span>5</span>
  </div>

• 子代選擇器「 >」
  規則：拿當前節點的父元素做爲父元素
  當 DOM 樹構造到 div 時，匹配了 CSS 規則的第一段
  激活.cls而且指定父元素必須是當前 div

  div>.cls {
      border:solid 1px green;
  }
  <div>
  <span>1<span>
  <span class=cls>2<span>
  <span>
      3
      <span>4</span>
  <span>
  <span>5</span>
  </div>

• 直接後繼選擇器「 +」

  • 思路1：只對惟一一個元素生效，把 #id+.cls 都當作檢查某一個元素的選擇器
  • 思路2：給後繼選擇器加上一個 flag，使它匹配一次後失效
• 列選擇器「 || 」
  專門針對表格的選擇器，跟表格的模型創建相關，winter不講這個啦

• 其餘

  • CSS 選擇器還支持逗號分隔

    視爲兩條規則的一種簡易寫法
    a#b, .cls {}
    a#b {}

  • 選擇器可能有重合

    使用樹形結構來進行一些合併
     #a .cls {}
     #a span {}
     #a>span {}
     
     #a 
         < 空格 >.cls
         < 空格 >span

• 總結：

  • CSS 計算：把 CSS 規則應用到 DOM 樹上，爲 DOM 結構添加顯示相關屬性的過程，獲得了一棵帶有 CSS 屬性的樹
  • 介紹了選擇器的幾種複合結構應該如何實現
• 擴展閱讀：從Chrome源碼看瀏覽器如何計算CSS
  https://zhuanlan.zhihu.com/p/...