你應該知道的前端--渲染原理

SGAMER-rain發表於2018-04-16

前端

瀏覽器渲染原理

我們很容易將瀏覽器引擎看作是一個黑盒子,就像電視資料一樣,黑盒子會指出顯示的資料。那麼瀏覽器是怎麼把資源/資料轉換到我們所看到的網頁的呢

1.1 構建物件模型

HTML描述了網頁的結構。為了理解HTML,瀏覽器引擎首先必須將其轉換為DOM(文件物件模型)。瀏覽器引擎中擁有解析器,它用於將HTML中的資料轉換為DOM

瀏覽器逐個構建DOM,只要第一行程式碼進來,他就開始解析HTML,向樹結構新增節點

具體的構建過程:

轉換: 瀏覽器從磁碟或網路中讀取HTML的原始位元組,並根據檔案的指定編碼
標籤化: 瀏覽器將字串轉換成符合HTML標準的標籤
詞法分析: 標籤轉換成定義其屬性和規則的物件
DOM構建: 在HTML中,巢狀定義了不同標籤之間的父子關係。在DOM中,物件被連結到捕獲這些關係的樹資料結構中。每個HTML標記都由一個DOM節點表示。

在網頁上的CSS樣式被對映到CSSOM(CSS物件模型)。他非常像DOM,但與DOM不同,他不能逐步構建,由於CSS規則可以相互覆蓋,因此瀏覽器引擎必須進行復雜計算才能確定CSS如何應用於DOM中。換個說法只有把CSS全部載入完才能構建CSSOM物件模型,但這樣會阻塞頁面渲染。

與處理HTML時一樣,我們需要將收到的CSS規則轉換成瀏覽器能夠理解和處理的東西。因此我們會重複HTML過程,不過是為了CSS而不是HTML

CSS位元組轉換成字元,接著轉換成令牌和節點,最後連結到CSSOM物件模型的樹結構內:

1.2 渲染樹構建,佈局,繪製

在構建完DOM樹和CSSOM樹,我們需要將將其合併後形成渲染樹

構建

為了構建渲染樹,瀏覽器大體上完成了下列工作

從DOM樹的根節點開始遍歷每個可見節點,某些節點不可見(例如指令碼標記,元標記等),因為他們不會體現在渲染輸出中,所以會被忽略。某些節點通過CSS隱藏,因此在渲染樹中也會被隱藏,例如display: none
對於每個可見節點,為其找到適配的CSSOM規則並應用他們
構建可見節點.連同其內容和計算的樣式

注意: visibility: hidden與display: none是不一樣的。前者隱藏元素,但元素仍佔據著佈局空間(即將其渲染成一個空的盒子),而後者則將元素從渲染樹中完全移除,元素即不可見,也不是佈局的組成部分。

佈局

有了渲染樹後,我們就可以進入佈局階段,到目前為止,我們計算了那些節點應該是可見的以及他們的計算樣式,但我們尚未計算他們在裝置視口內的確切位置和大小,這就是佈局階段,也稱為重排

HTML採用基於流的佈局模型.這意味著大多數情況下只要依次遍歷就能計算出幾何資訊。處於流中靠後位置元素通常不會影響靠前位置元素的幾何特徵,因此佈局可以按從左至有,從上至下的順序遍歷文件。

佈局是一個遞迴的過程,他從根節點(html元素),開始,然後遞迴遍歷部分或所有的框架層次結構,為每一個需要計算的節點,計算幾何資訊

繪製

在繪製階段,系統會遍歷渲染樹,將渲染樹的內容顯示在螢幕上。

動態變化

在發生變化時,會盡可能做出最小的響應。因此,元素的顏色改變後,只會對該元素進行重繪。元素的位置改變後,只會對該元素及其子元素(可能還有同級元素)進行佈局和重繪。新增DOM節點後,會對該節點進行佈局和重繪。一些重大變化(例如增大html元素的字型)會導致快取無效,使得整個渲染樹都會進行重新佈局和重繪