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

ls0609 發布于2019-08-29 18:41 / 1840人閱讀

摘要：選擇器匹配流程前進一個選擇器按照來拆成數段，每當滿足一段條件的時候，就前進一段。后退選擇器的作用范圍，匹配到本標簽的結束標簽時作用范圍邊緣回退。

加載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;
}


    1
    2

3

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

.cls~* {
    border:solid 1px green;
}

1
2

    3
    4

5

子代選擇器“ >”
規則：拿當前節點的父元素作為父元素
當 DOM 樹構造到 div 時，匹配了 CSS 規則的第一段
激活.cls并且指定父元素必須是當前 div

div>.cls {
    border:solid 1px green;
}

1
2

    3
    4

5

直接后繼選擇器“ +”

思路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/...

GPU云服務器云服務器瀏覽器對和css3的支持如何關閉瀏覽器的webRTC 如何更改瀏覽器自帶的webrtc 腳本qtp瀏覽器工作ie

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

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

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

摘要：選擇器匹配流程前進一個選擇器按照來拆成數段，每當滿足一段條件的時候，就前進一段。后退選擇器的作用范圍，匹配到本標簽的結束標簽時作用范圍邊緣回退。加載css 加載是異步，不會影響DOM樹的構建，只是說在CSS沒處理好之前，構建好的DOM并不會顯示出來啟發：所以CSS不能太大，頁面一打開將會停留較長時間的白屏，所以把圖片/字體等轉成base64放到CSS里面是一種不太推薦的做法 ...

cloud 2019-08-30 15:44 評論0 收藏0
重學前端學習筆記（十一）--瀏覽器工作解析（一）

摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

paulli3 2019-08-02 16:17 評論0 收藏0
重學前端學習筆記（十一）--瀏覽器工作解析（一）

摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

付永剛 2019-08-30 10:49 評論0 收藏0
重學前端學習筆記（十一）--瀏覽器工作解析（一）

摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務端回復響應部分第一行被稱作，它也分為三個部分，協議和版本狀態碼和狀態文本。對前端來說系列的狀態碼是非常陌生的，原因是的狀態被瀏覽器庫直接處理掉了，不會讓上層應用知曉。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

alighters 2019-08-26 18:26 評論0 收藏0