這次簡單聊聊我對瀏覽器的渲染機制的理解。首先需要提到幾個基本概念：
DOM:Document Object Model，瀏覽器將HTML解析成樹形的數據結構，簡稱DOM。
CSSOM:CSS Object Model，瀏覽器將CSS解析成樹形的數據結構，簡稱CSSOM。
Render Tree:DOM和CSSOM合并后生成Render Tree，如下圖：
圖片1
Layout: 計算出Render Tree每個節點的具體位置。
Painting:通過顯卡，將Layout后的節點內容分別呈現到屏幕上。
下面我們來說說具體的流程。 如何通過url獲取對應的html文件的過程我就不詳細介紹了，不熟悉的同學可以看看輸入url到頁面返回的全過程
當我們的瀏覽器獲得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來看看：
圖片2
可以看到，html文件，css文件和部分javascript是在一開始就加載完成的。然后html和css配合進行render階段，最后大量的javascript進行加載。而整個過程中都伴隨著零散文件如圖片的加載。
當然，每個瀏覽器對于渲染的實現機制都不相同，比如說chrome會在一開始就將不影響DOM結構的javascript也異步加載從而進一步提高性能等。
