瀏覽器渲染分為幾個(gè)過(guò)程，其中每個(gè)過(guò)程都有幾個(gè)特點(diǎn)：
- 都有其輸入的內(nèi)容
- 都有其處理過(guò)程
- 都有其生成的輸出內(nèi)容
一瘦陈、構(gòu)建 DOM 樹
瀏覽器是無(wú)法識(shí)別 html 代碼的。因此需要將其轉(zhuǎn)換為 DOM 樹，即一種瀏覽器可以識(shí)別俐载、可以用 JS 腳本操作的結(jié)構(gòu)。
在這一步驟里登失，輸入的內(nèi)容是 HTML 文檔遏佣，輸出的是 DOM 樹。
在瀏覽器的 console 控制臺(tái)輸入 document 即可打印出當(dāng)前頁(yè)面的 DOM 樹揽浙。
二状婶、樣式計(jì)算
這一階段的目的是為了計(jì)算出 DOM 節(jié)點(diǎn)中每個(gè)元素的具體樣式意敛。在計(jì)算中需要遵守 CSS 的繼承和層疊兩個(gè)規(guī)則。
在這一階段膛虫，輸入的內(nèi)容是 CSS 文本空闲，輸出的是每個(gè) DOM 節(jié)點(diǎn)的樣式，被保存在 computedStyle 的結(jié)構(gòu)內(nèi)走敌。最終的計(jì)算結(jié)果可以在瀏覽器控制臺(tái)-element-computed查看碴倾。
2.1 把 CSS 轉(zhuǎn)換為瀏覽器能理解的結(jié)構(gòu)
同樣的，瀏覽器也是無(wú)法識(shí)別 CSS 代碼的掉丽，瀏覽器接收到 CSS 文本后跌榔，會(huì)將其轉(zhuǎn)換為瀏覽器可以識(shí)別的結(jié)構(gòu)：styleSheets
在瀏覽器的 console 控制臺(tái)輸入 document.styleSheets 即可打印出當(dāng)前頁(yè)面的 CSS 結(jié)構(gòu)。
CSS 樣式有三個(gè)來(lái)源：
- 通過(guò) link 引用的外部 CSS 文件
- <style> 標(biāo)簽內(nèi)的 CSS 樣式
- HTML 元素的 style 屬性內(nèi)嵌的 CSS 樣式
2.2 轉(zhuǎn)換樣式表中的屬性值
某一些 CSS 屬性有不同形式的值捶障，如：
- 長(zhǎng)度單位有px僧须、em、rem
- 表示顏色有關(guān)鍵字（blue）项炼、rgb等
瀏覽器需要將這些不同形式的屬性值轉(zhuǎn)換為標(biāo)準(zhǔn)化的計(jì)算值担平，方便進(jìn)一步處理
2.3 計(jì)算 DOM 樹中每個(gè)節(jié)點(diǎn)的具體樣式
接下來(lái)，需要計(jì)算 DOM 樹中每個(gè)節(jié)點(diǎn)的樣式屬性锭部。
這就涉及到了一個(gè)概念：CSS 繼承暂论。
CSS 繼承指每個(gè)節(jié)點(diǎn)都包含父節(jié)點(diǎn)的樣式。
關(guān)于元素樣式的繼承拌禾，可以在瀏覽器控制臺(tái)-element-style里查看取胎。每個(gè)屬性來(lái)自哪個(gè)父節(jié)點(diǎn)，及來(lái)自哪個(gè)文件都標(biāo)記的很清楚
三湃窍、布局
3.1 創(chuàng)建布局樹
在 DOM 樹中闻蛀，有一些節(jié)點(diǎn)不需要渲染，有一些節(jié)點(diǎn)被設(shè)置了不可見您市，如：display：none
所以瀏覽器會(huì)將所有需要渲染的節(jié)點(diǎn)創(chuàng)建布局樹觉痛。
3.2 布局計(jì)算
詳見下篇：瀏覽器渲染過(guò)程（二）
