我們第一章講了瀏覽器的組成原理，如果沒有看到文章的話記得返回去看第一篇，在講渲染流程之前先放上一篇文章用到的圖：
上圖是瀏覽器的主要組成部分，而渲染引擎是瀏覽器中的重要組成部分，其中圖中的rendering Engine就是我們今天要講的渲染引擎，首先了解下渲染引擎的工作流程
渲染引擎工作流程
（webkit渲染引擎流程）
關鍵渲染路徑關鍵渲染路徑是指瀏覽器從最初接收請求來的HTML、CSS、javascript等資源，然後解析、構建樹、渲染布局、繪製，最後呈現給客戶能看到的界面這整個過程。所以瀏覽器的渲染過程主要包括以下幾步：
1.解析HTML生成DOM樹。
2.解析CSS生成CSSOM規則樹。
3.將DOM樹與CSSOM規則樹合併在一起生成渲染樹。
4.遍歷渲染樹開始佈局，計算每個節點的位置大小信息。
5.將渲染樹每個節點繪製到屏幕。
構建DOM樹
當瀏覽器接收到服務器響應來的HTML文檔後，會遍歷文檔節點，生成DOM樹。需要注意的是，DOM樹的生成過程中可能會被CSS和JS的加載執行阻塞。渲染阻塞問題下文會講。
構建CSSOM規則樹
瀏覽器解析CSS文件並生成CSS規則樹，每個CSS文件都被分析成一個StyleSheet對象，每個對象都包含CSS規則。CSS規則對象包含對應於CSS語法的選擇器和聲明對象以及其他對象。
構建渲染樹
通過DOM樹和CSS規則樹我們便可以構建渲染樹。瀏覽器會先從DOM樹的根節點開始遍歷每個可見節點。對每個可見節點，找到其適配的CSS樣式規則並應用。
渲染樹構建完成後，每個節點都是可見節點並且都含有其內容和對應規則的樣式。這也是渲染樹與DOM樹的最大區別所在。渲染樹是用於顯示，那些不可見的元素當然就不會在這棵樹中出現了，譬如。除此之外，display等於none的也不會被顯示在這棵樹裏頭，但是visibility等於hidden的元素是會顯示在這棵樹裏頭的。
渲染樹佈局
佈局階段會從渲染樹的根節點開始遍歷，然後確定每個節點對象在頁面上的確切大小與位置，佈局階段的輸出是一個盒子模型，它會精確地捕獲每個元素在屏幕內的確切位置與大小。
渲染樹繪製
在繪製階段，遍歷渲染樹，調用渲染器的paint()方法在屏幕上顯示其內容。渲染樹的繪製工作是由瀏覽器的UI後端組件完成的。
參考文獻：
http://chuquan.me/2018/01/21/browser-architecture-overview/
https://juejin.im/post/5a8e242c5188257a6b060000