首先需要提到幾個基本概念：
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，如下圖：
xuanrantu.jpg
Layout: 計算出Render Tree每個節(jié)點的具體位置。
Painting:通過顯卡，將Layout后的節(jié)點內(nèi)容分別呈現(xiàn)到屏幕上。
下面我們來說說具體的流程。 如何通過url獲取對應(yīng)的html文件的過程我就不詳細介紹了，不熟悉的同學(xué)可以看看從 URL 輸入到頁面展現(xiàn)發(fā)生了什么
當我們的瀏覽器獲得html文件后，會自上而下的加載，并在加載過程中進行解析和渲染。 加載說的就是獲取資源文件的過程，如果在加載的過程中，遇到外部css文件和圖片，瀏覽器會另外發(fā)出一個請求，來獲取css文件和相應(yīng)的圖片，這個請求是異步的，并不會影響html文件。 但是如果遇到j(luò)avascript文件，html文件會掛起渲染的線程，等待javascript加載完畢后，html文件再繼續(xù)渲染。
因為javascript可能會修改DOM，導(dǎo)致后續(xù)的html資源白白加載，所以html必須等待javascript文件加載完畢后，再繼續(xù)渲染。這也就是為什么javascript文件要寫在底部body標簽前的原因。
html的渲染過程就是將html代碼按照深度優(yōu)先遍歷來生成DOM樹。 css文件下載完后也會進行渲染，生成相應(yīng)的CSSOM。 當所有的css文件下載完且所有的CSSOM構(gòu)建結(jié)束后，就會和DOM一起生成Render Tree。 接下來，瀏覽器就會進入Layout環(huán)節(jié)，將所有的節(jié)點位置計算出來。 最后，通過Painting環(huán)節(jié)將所有的節(jié)點內(nèi)容呈現(xiàn)到屏幕上。
當然，每個瀏覽器對于渲染的實現(xiàn)機制都不相同，比如說chrome會在一開始就將不影響DOM結(jié)構(gòu)的javascript也異步加載從而進一步提高性能等。
