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

資訊專欄INFORMATION COLUMN

【winter重學(xué)前端筆記13】瀏覽器：一個(gè)瀏覽器是如何工作的？CSS計(jì)算

ls0609 / 1861人閱讀

摘要：選擇器匹配流程前進(jìn)一個(gè)選擇器按照來(lái)拆成數(shù)段，每當(dāng)滿足一段條件的時(shí)候，就前進(jìn)一段。后退選擇器的作用范圍，匹配到本標(biāo)簽的結(jié)束標(biāo)簽時(shí)作用范圍邊緣回退。

加載css

加載是異步，不會(huì)影響DOM樹(shù)的構(gòu)建，只是說(shuō)在CSS沒(méi)處理好之前，構(gòu)建好的DOM并不會(huì)顯示出來(lái)

啟發(fā)：所以CSS不能太大，頁(yè)面一打開(kāi)將會(huì)停留較長(zhǎng)時(shí)間的白屏，所以把圖片/字體等轉(zhuǎn)成base64放到CSS里面是一種不太推薦的做法

DOM去匹配css rule的時(shí)候必須先等頁(yè)面的css都下載完成

啟發(fā)：head中的css是要下載完的，body中放CSS的話，會(huì)重新計(jì)算

css語(yǔ)法：選擇器

在9課程中可以了解更多選擇器：compound-selector

特點(diǎn)(css設(shè)計(jì)原則)：選擇器的出現(xiàn)順序，必定跟構(gòu)建 DOM 樹(shù)的順序一致，即：保證選擇器在 DOM 樹(shù)構(gòu)建到當(dāng)前節(jié)點(diǎn)時(shí)，已經(jīng)可以準(zhǔn)確判斷是否匹配，不需要后續(xù)節(jié)點(diǎn)信息 - 未來(lái)不可能會(huì)出現(xiàn)“父元素選擇器”這種東西

流式渲染，每生成一個(gè)dom節(jié)點(diǎn)，便立刻去匹配相應(yīng)的css規(guī)則

空格: 后代，選中它的子節(jié)點(diǎn)和所有子節(jié)點(diǎn)的后代節(jié)點(diǎn)

: 子代，選中它的子節(jié)點(diǎn)

+：直接后繼選擇器，選中它的下一個(gè)相鄰節(jié)點(diǎn)

~：后繼，選中它之后所有的相鄰節(jié)點(diǎn)

||：列，選中表格中的一列

winter不講怎么解析css規(guī)則啦，詞法分析和語(yǔ)法分析不做贅述

cssom

CSSOM主要是DOM結(jié)構(gòu)上的盒的描述，它基本上是依附于DOM樹(shù)的，不要和css的語(yǔ)法樹(shù)混淆

cssom是有rule部分和view部分的，rule部分是在dom開(kāi)始之前就構(gòu)件完成的，而view部分是跟著dom同步構(gòu)建的。

css選擇器匹配流程

前進(jìn)：一個(gè) CSS 選擇器按照 compound-selector來(lái)拆成數(shù)段，每當(dāng)滿足一段條件的時(shí)候，就前進(jìn)一段。

后退：選擇器的作用范圍，匹配到本標(biāo)簽的結(jié)束標(biāo)簽時(shí)（作用范圍邊緣）回退。

后代選擇器 “空格”
規(guī)則：

前進(jìn)：找到了匹配 a#b 的元素時(shí)，我們才會(huì)開(kāi)始檢查它所有的子代是否匹配 .cls(前進(jìn)到.cls)

后退：當(dāng)遇到 時(shí)，必須使得規(guī)則 a#b .cls 回退一步(回退到a#b)這樣第三個(gè) span 才不會(huì)被選中 - 后代選擇器的作用范圍是父節(jié)點(diǎn)的所有子節(jié)點(diǎn)，因此規(guī)則是在匹配到本標(biāo)簽的結(jié)束標(biāo)簽時(shí)回退。

a#b .cls {

    width: 100px;
}


    1
    2

3

后繼選擇器“ ~ ”
規(guī)則：給選擇器的激活- 帶上一個(gè)條件：父元素
原因：后繼選擇器只作用于一層.按照 DOM 樹(shù)的構(gòu)造順序，4 在 3 和 5 中間，我們就沒(méi)有辦法像前面講的后代選擇器一樣通過(guò)激活或者關(guān)閉規(guī)則來(lái)實(shí)現(xiàn)匹配
過(guò)程：當(dāng)前半段的 .cls 匹配成功時(shí)，后續(xù) * 所匹配的所有元素的父元素都已經(jīng)確定了（后繼節(jié)點(diǎn)和當(dāng)前節(jié)點(diǎn)父元素相同是充分必要條件

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


1
2

    3
    4

5

子代選擇器“ >”
規(guī)則：拿當(dāng)前節(jié)點(diǎn)的父元素作為父元素
當(dāng) DOM 樹(shù)構(gòu)造到 div 時(shí)，匹配了 CSS 規(guī)則的第一段
激活.cls并且指定父元素必須是當(dāng)前 div

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


1
2

    3
    4

5

直接后繼選擇器“ +”

思路1：只對(duì)唯一一個(gè)元素生效，把 #id+.cls 都當(dāng)做檢查某一個(gè)元素的選擇器

思路2：給后繼選擇器加上一個(gè) flag，使它匹配一次后失效

列選擇器“ || ”
專門針對(duì)表格的選擇器，跟表格的模型建立相關(guān)，winter不講這個(gè)啦

其他

CSS 選擇器還支持逗號(hào)分隔

視為兩條規(guī)則的一種簡(jiǎn)易寫(xiě)法
a#b, .cls {}
a#b {}

選擇器可能有重合

 使用樹(shù)形結(jié)構(gòu)來(lái)進(jìn)行一些合并
 #a .cls {}
 #a span {}
 #a>span {}
 
 #a 
     < 空格 >.cls
     < 空格 >span

總結(jié)：

CSS 計(jì)算：把 CSS 規(guī)則應(yīng)用到 DOM 樹(shù)上，為 DOM 結(jié)構(gòu)添加顯示相關(guān)屬性的過(guò)程，得到了一棵帶有 CSS 屬性的樹(shù)

介紹了選擇器的幾種復(fù)合結(jié)構(gòu)應(yīng)該如何實(shí)現(xiàn)

擴(kuò)展閱讀：從Chrome源碼看瀏覽器如何計(jì)算CSS
https://zhuanlan.zhihu.com/p/...

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

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

相關(guān)文章

  • 【winter重學(xué)前端筆記13】瀏覽器：一個(gè)瀏覽器是如何工作的？CSS計(jì)算

    摘要：選擇器匹配流程前進(jìn)一個(gè)選擇器按照來(lái)拆成數(shù)段，每當(dāng)滿足一段條件的時(shí)候，就前進(jìn)一段。后退選擇器的作用范圍，匹配到本標(biāo)簽的結(jié)束標(biāo)簽時(shí)作用范圍邊緣回退。 加載css 加載是異步，不會(huì)影響DOM樹(shù)的構(gòu)建，只是說(shuō)在CSS沒(méi)處理好之前，構(gòu)建好的DOM并不會(huì)顯示出來(lái) 啟發(fā)：所以CSS不能太大，頁(yè)面一打開(kāi)將會(huì)停留較長(zhǎng)時(shí)間的白屏，所以把圖片/字體等轉(zhuǎn)成base64放到CSS里面是一種不太推薦的做法 ...

    cloud 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十一）--瀏覽器工作解析（一）

    摘要：緊跟在后面的是請(qǐng)求頭，每行用冒號(hào)分隔名稱和值按下兩次回車，收到服務(wù)端回復(fù)響應(yīng)部分第一行被稱作，它也分為三個(gè)部分，協(xié)議和版本狀態(tài)碼和狀態(tài)文本。對(duì)前端來(lái)說(shuō)系列的狀態(tài)碼是非常陌生的，原因是的狀態(tài)被瀏覽器庫(kù)直接處理掉了，不會(huì)讓上層應(yīng)用知曉。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要...

    paulli3 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十一）--瀏覽器工作解析（一）

    摘要：緊跟在后面的是請(qǐng)求頭，每行用冒號(hào)分隔名稱和值按下兩次回車，收到服務(wù)端回復(fù)響應(yīng)部分第一行被稱作，它也分為三個(gè)部分，協(xié)議和版本狀態(tài)碼和狀態(tài)文本。對(duì)前端來(lái)說(shuō)系列的狀態(tài)碼是非常陌生的，原因是的狀態(tài)被瀏覽器庫(kù)直接處理掉了，不會(huì)讓上層應(yīng)用知曉。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要...

    付永剛 評(píng)論0 收藏0

  • 重學(xué)前端學(xué)習(xí)筆記（十一）--瀏覽器工作解析（一）

    摘要：緊跟在后面的是請(qǐng)求頭，每行用冒號(hào)分隔名稱和值按下兩次回車，收到服務(wù)端回復(fù)響應(yīng)部分第一行被稱作，它也分為三個(gè)部分，協(xié)議和版本狀態(tài)碼和狀態(tài)文本。對(duì)前端來(lái)說(shuō)系列的狀態(tài)碼是非常陌生的，原因是的狀態(tài)被瀏覽器庫(kù)直接處理掉了，不會(huì)讓上層應(yīng)用知曉。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要...

    alighters 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<