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