這次簡單聊聊我對瀏覽器的渲染機制的理解。首先需要提到幾個基本概念：
DOM：Document Object Model，瀏覽器將HTML解析成樹形的資料結構，簡稱DOM。
CSSOM：CSS Object Model，瀏覽器將CSS解析成樹形的資料結構，簡稱CSSOM。
Render Tree: DOM和CSSOM合併後生成Render Tree，如下圖：

Layout: 計算出Render Tree每個節點的具體位置。
Painting：通過顯示卡，將Layout後的節點內容分別呈現到螢幕上。

下面我們來說說具體的流程。
如何通過url獲取對應的html檔案的過程我就不詳細介紹了，不熟悉的同學可以看看

當我們的瀏覽器獲得html檔案後，會自上而下的載入，並在載入過程中進行解析和渲染。
載入說的就是獲取資原始檔的過程，如果在載入的過程中，遇到外部css檔案和圖片，瀏覽器會另外發出一個請求，來獲取css檔案和相應的圖片，這個請求是非同步的，並不會影響html檔案。
但是如果遇到javascript檔案，html檔案會掛起渲染的執行緒，等待javascript載入完畢後，html檔案再繼續渲染。

為什麼html需要等待javascript呢？因為javascript可能會修改DOM，導致後續的html資源白白載入，所以html必須等待javascript檔案載入完畢後，再繼續渲染。這也就是為什麼javascript檔案要寫在底部body標籤前

好了，接下來我們介紹渲染的細節，html的渲染過程就是將html程式碼按照來生成DOM樹。
css檔案下載完後也會進行渲染，生成相應的CSSOM。
當所有的css檔案下載完且所有的CSSOM構建結束後，就會和DOM一起生成Render Tree。
接下來，瀏覽器就會進入Layout環節，將所有的節點位置計算出來。
最後，通過Painting環節將所有的節點內容呈現到螢幕上。

我們理解的重排和重繪也就是分別觸發了Layout環節和Painting環節。現在是不是清晰多了呢？

我們以百度為例通過Timeline來看看：

可以看到，html檔案，css檔案和部分javascript是在一開始就載入完成的。然後html和css配合進行render階段，最後大量的javascript進行載入。而整個過程中都伴隨著零散檔案如圖片的載入。

當然，每個瀏覽器對於渲染的實現機制都不相同，比如說chrome會在一開始就將不影響DOM結構的javascript也非同步載入從而進一步提高效能等。以上的過程也只是我個人的理解，如果有什麼不嚴謹的地方，還望大神提出。