WebKit 主流程
- 用戶輸入U(xiǎn)RL，瀏覽器向web服務(wù)器發(fā)送一個(gè)http請(qǐng)求，接受文檔內(nèi)容（HTML、CSS、JS、Images等等）。
- 渲染引擎開始解析 HTML 文檔，并將各標(biāo)記逐個(gè)轉(zhuǎn)化成DOM Tree上的節(jié)點(diǎn)
- 由 DOM 元素和屬性節(jié)點(diǎn)構(gòu)成的樹結(jié)構(gòu)。DOM 是文檔對(duì)象模型 (Document Object Model) 的縮寫，是 HTML 文檔的對(duì)象表示，同時(shí)也是外部?jī)?nèi)容（例如 JavaScript）與 HTML 元素之間的接口。 解析樹的根節(jié)點(diǎn)是Document對(duì)象。
- 解析 HTML由兩個(gè)階段組成：標(biāo)記化和樹構(gòu)建
- 解析CSS生成CSS Rule Tree
- 解析完成后，瀏覽器引擎會(huì)通過DOM Tree 和 CSS Rule Tree 來構(gòu)造 Rendering Tree
- 由可視化元素按照其顯示順序而組成的樹，也是文檔的可視化表示。它的作用是讓您按照正確的順序繪制內(nèi)容。
- Rendering Tree和 DOM 元素相對(duì)應(yīng)的，但并非一一對(duì)應(yīng)
- 進(jìn)入布局處理，為每個(gè)節(jié)點(diǎn)分配一個(gè)應(yīng)出現(xiàn)在屏幕上的確切坐標(biāo)。
- 下一步是繪制。系統(tǒng)會(huì)遍歷Rendering Tree，并調(diào)用Rendering器的“paint”方法，將內(nèi)容顯示在屏幕上。繪制工作是使用用戶界面基礎(chǔ)組件完成的。
- 這是一個(gè)漸進(jìn)的過程。為達(dá)到更好的用戶體驗(yàn)，render力求盡快將內(nèi)容顯示在屏幕上。它不必等到整個(gè) HTML 文檔解析完畢之后，就會(huì)開始構(gòu)建render tree和layout。在不斷接收和處理來自網(wǎng)絡(luò)的其余內(nèi)容的同時(shí)，render tree會(huì)將部分內(nèi)容解析并顯示出來。
