上圖為主流兩種主流內(nèi)核的渲染主流程
雖然 Webkit 和 Gecko 使用的術(shù)語(yǔ)略有不同，但整體流程是基本相同的。
Gecko 將視覺(jué)格式化元素組成的樹(shù)稱(chēng)為“框架樹(shù)”。每個(gè)元素都是一個(gè)框架。Webkit 使用的術(shù)語(yǔ)是“呈現(xiàn)樹(shù)”，它由“呈現(xiàn)對(duì)象”組成。對(duì)于元素的放置，Webkit 使用的術(shù)語(yǔ)是“布局”，而 Gecko 稱(chēng)之為“重排”。對(duì)于連接 DOM 節(jié)點(diǎn)和可視化信息從而創(chuàng)建呈現(xiàn)樹(shù)的過(guò)程，Webkit 使用的術(shù)語(yǔ)是“附加”。有一個(gè)細(xì)微的非語(yǔ)義差別，就是 Gecko 在 HTML 與 DOM 樹(shù)之間還有一個(gè)稱(chēng)為“內(nèi)容槽”的層，用于生成 DOM 元素。
根據(jù)上圖，依次介紹每一步
1. Html、Style Sheets、Script加載
當(dāng)我們的瀏覽器獲得html文件后，會(huì)自上而下的加載，并在加載過(guò)程中進(jìn)行解析和渲染。 加載說(shuō)的就是獲取資源文件的過(guò)程，如果在加載的過(guò)程中，遇到外部css文件和圖片，瀏覽器會(huì)另外發(fā)出一個(gè)請(qǐng)求，來(lái)獲取css文件和相應(yīng)的圖片，這個(gè)請(qǐng)求是異步的，并不會(huì)影響html文件。 但是如果遇到j(luò)avascript文件，html文件會(huì)掛起渲染的線(xiàn)程，等待javascript加載完畢后，html文件再繼續(xù)渲染。
為什么html需要等待javascript呢？因?yàn)閖avascript可能會(huì)修改DOM，導(dǎo)致后續(xù)的html資源白白加載，所以html必須等待javascript文件加載完畢后，再繼續(xù)渲染。這也就是為什么javascript文件要寫(xiě)在底部body標(biāo)簽前的原因。
2. 構(gòu)造樹(shù)
html的渲染過(guò)程就是將html代碼按照深度優(yōu)先遍歷來(lái)生成DOM樹(shù)。 css文件下載完后也會(huì)進(jìn)行渲染，生成相應(yīng)的CSSOM。 當(dāng)所有的css文件下載完且所有的CSSOM構(gòu)建結(jié)束后，就會(huì)和DOM一起生成Render Tree
DOM: Document Object Model，瀏覽器將HTML解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)，簡(jiǎn)稱(chēng)DOM
CSSOM: CSS Object Model，瀏覽器將CSS解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)，簡(jiǎn)稱(chēng)CSSOM。
Render Tree: DOM和CSSOM合并后生成Render Tree，如下圖：
3. layout和reflow
計(jì)算每個(gè)Frame（也就是每個(gè)Element）的位置，這又叫l(wèi)ayout和reflow過(guò)程。
- Repaint——屏幕的一部分要重畫(huà)，比如某個(gè)CSS的背景色變了。但是元素的幾何尺寸沒(méi)有變。
- Reflow——意味著元件的幾何尺寸變了，我們需要重新驗(yàn)證并計(jì)算Render Tree。是Render Tree的一部分或全部發(fā)生了變化。這就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的幾何尺寸發(fā)生了變化，需要重新布局，也就叫reflow）reflow 會(huì)從<html>這個(gè)root frame開(kāi)始遞歸往下，依次計(jì)算所有的結(jié)點(diǎn)幾何尺寸和位置，在reflow過(guò)程中，可能會(huì)增加一些frame，比如一個(gè)文本字符串必需被包裝起來(lái)。
參考
瀏覽器的渲染原理簡(jiǎn)介
簡(jiǎn)述瀏覽器渲染機(jī)制
瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘
