首先需要提到幾個基本概念：
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文件的過程我就不詳細介紹了肌割，不熟悉的同學可以看看從 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也異步加載從而進一步提高性能等。
