大體分為以下步驟：
1.解析HTML標(biāo)簽，構(gòu)建DOM樹。
2.解析CSS標(biāo)簽，構(gòu)建CSSOM樹。
3.把DOM和CSSOM組合成渲染樹（render tree）。
4.在渲染樹的基礎(chǔ)上進(jìn)行布局，計算每個節(jié)點的幾何結(jié)構(gòu)。
5.把每個節(jié)點繪制到屏幕上（painting）。
DOM：Document Object Model，瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)，簡稱DOM。CSSOM：CSS Object Model，瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu)，簡稱CSSOM。Render Tree: DOM和CSSOM合并后生成Render Tree
Layout: 計算出Render Tree每個節(jié)點的具體位置。
Painting:通過顯卡，將Layout后的節(jié)點內(nèi)容分別呈現(xiàn)到屏幕上。
下面我們來說說具體的流程。
當(dāng)瀏覽器獲得html文件后，會自上而下的加載，并在加載過程中進(jìn)行解析和渲染。 加載說的就是獲取資源文件的過程，如果在加載的過程中，遇到外部css文件和圖片，瀏覽器會另外發(fā)出一個請求，來獲取css文件和相應(yīng)的圖片，這個請求是異步的，并不會影響html文件。 但是如果遇到j(luò)avascript文件，html文件會掛起渲染的線程，等待javascript加載完畢后，html文件再繼續(xù)渲染。因為javascript可能會修改DOM，導(dǎo)致后續(xù)的html資源白白加載，所以html必須等待javascript文件加載完畢后，再繼續(xù)渲染。這也就是為什么javascript文件要寫在底部body標(biāo)簽前的原因。html的渲染過程就是將html代碼按照深度優(yōu)先遍歷來生成DOM樹。 css文件下載完后也會進(jìn)行渲染，生成相應(yīng)的CSSOM。 當(dāng)所有的css文件下載完且所有的CSSOM構(gòu)建結(jié)束后，就會和DOM一起生成Render Tree。 接下來，瀏覽器就會進(jìn)入Layout環(huán)節(jié)，將所有的節(jié)點位置計算出來。 最后，通過Painting環(huán)節(jié)將所有的節(jié)點內(nèi)容呈現(xiàn)到屏幕上。當(dāng)然，每個瀏覽器對于渲染的實現(xiàn)機制都不相同，比如說chrome會在一開始就將不影響DOM結(jié)構(gòu)的javascript也異步加載從而進(jìn)一步提高性能等。
