上圖為主流兩種主流內(nèi)核的渲染主流程
雖然 Webkit 和 Gecko 使用的術(shù)語(yǔ)略有不同欺栗，但整體流程是基本相同的怠肋。
Gecko 將視覺(jué)格式化元素組成的樹(shù)稱為“框架樹(shù)”。每個(gè)元素都是一個(gè)框架。Webkit 使用的術(shù)語(yǔ)是“呈現(xiàn)樹(shù)”缸逃，它由“呈現(xiàn)對(duì)象”組成驮樊。對(duì)于元素的放置墙牌，Webkit 使用的術(shù)語(yǔ)是“布局”轩娶，而 Gecko 稱之為“重排”。對(duì)于連接 DOM 節(jié)點(diǎn)和可視化信息從而創(chuàng)建呈現(xiàn)樹(shù)的過(guò)程沾凄，Webkit 使用的術(shù)語(yǔ)是“附加”梗醇。有一個(gè)細(xì)微的非語(yǔ)義差別，就是 Gecko 在 HTML 與 DOM 樹(shù)之間還有一個(gè)稱為“內(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ì)掛起渲染的線程，等待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)稱DOM
CSSOM: CSS Object Model餐禁，瀏覽器將CSS解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)，簡(jiǎn)稱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ò)瀏覽器幕后揭秘
