之前頭條面試被問到，雖然不是崗位相關的，但是還是想作為常識瞭解下。這裡對這部分內容進行一個記錄、梳理和總結。
· 首先說一下什麼是瀏覽器渲染引擎。瀏覽器渲染引擎是渲染出瀏覽器展示的內容的。預設請情況下，瀏覽器渲染引擎可以顯
示 HTML、XML文件以及圖片。如果需要顯示別的內容，比如現在瀏覽器都可以直接開啟PDF檔案，這些功能不是瀏覽器原生
的，是在瀏覽 器中安裝了PDF閱讀器的外掛做到顯示PDF檔案的。本文主要總結渲染引擎最主要的用途——顯示應用了CSS之
後的html及圖片。
目前主流的瀏覽器Chrome和Firefox都是基於兩種渲染引擎構建的。Firefox使用Geoko（Mozilla自主研發的渲染引擎），
Chrome使用的是Webkit。
渲染主流程
·首先獲得請求的文件內容，以8K分塊方式完成。
·解析HTML構建DOM樹-->構建Render樹-->佈局Render樹-->繪製Render樹
注：
1.DOM樹：瀏覽器將HTML解析成樹形的資料結構
2.CSS Rule 樹：瀏覽器將CSS解析成樹形的資料結構
3.Render 樹：將CSSOM和DOM合併成Render樹
4.Layout：有了Render 樹以後，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及從屬關係，從而計算出每個
節點在螢幕中的位置
5.Painting：根基算出來的規則，通過顯示卡把內容畫在螢幕上
6.Reflow(迴流)：瀏覽器發現某個部分發生了點變化影響了佈局，需要倒回去重新渲染。Reflow會從HTML的root frame開始
往下遞迴，依次計算各個幾何點的尺寸和位置（Reflow幾乎無法避免）。介面上樹狀目錄的摺疊和展開（元素的顯示和隱
藏）等，都會引起Reflow。滑鼠滑過、點選等行為引起了頁面上某些元素的變化，都會引起整個頁面重新渲染。瀏覽器會
Reflow哪些程式碼，是無法估計的，一般都是相互影響的
7.Repaint（重繪）：改變某元素的背景色、邊框顏色等不影響它周圍的或內部佈局的屬性，螢幕的一部分要重畫，但是元素
的集合尺寸沒有發生改變。
8.有些時候，一次元素髮生改變並不會立馬Reflow或者Repaint而是會將改變化積累到一定的量在發生變化
Geoko渲染流程圖
Webkit渲染流程圖
Geoko和Webkit的渲染細節的區別可以參考 www.cnblogs.com/slly/p/6640… 這篇部落格