從基礎架構上我們也可以看到瀏覽器的重頭戲其實在於渲染引擎(又稱排版引擎)，很多頁面相容性問題的根源可以說也皆**於此。好了，那我們深入到渲染引擎內部仔細看一下吧
從基礎架構上我們也可以看到瀏覽器的重頭戲其實在於渲染引擎(又稱排版引擎)，很多頁面相容性問題的根源可以說也皆**於此。360瀏覽器html5跑分再高（與互動再怎麼不一樣，核心還是一樣的。好了，那我們深入到渲染引擎內部仔細看一下吧。
渲染引擎（the rendering engine）簡述
渲染引擎的職責，正如字面上的意思就是負責從伺服器端返回的html，xml，或者images等資源的渲染工作並顯示給終端使用者。通過瀏覽器 外掛程式（plug-in or browser extension）技術，它也能顯示一些其他文件格式的資源，如pdf，後期的文章會針對這種技術進行一下說明，本章重點描述渲染引擎的首要功能，即通 過渲染引擎顯示出經過css樣式化的html和結果。
基本渲染過程
使用者請求的資源通過瀏覽器的網路層到達渲染引擎後，渲染工作開始。每次渲染文件通常不會超過8k的資料塊，其中基礎的渲染過程如下圖所示:
渲染引擎首先解析html文件，轉換為一棵dom樹，此為第一步。接下來不管是內聯式，外聯式還是嵌入式引入的css樣式也會被解析，渲染出另 外一棵用於渲染dom樹的樹-渲染樹(render tree) ，渲染樹包含帶有顏色，尺寸等顯示屬性的矩形，這些矩形的順序與顯示順序一致。然後就是對渲染樹的每個節點進行布局處理，確定其在螢幕上的顯示位置。最後 就是遍歷渲染樹並用上一章提到的ｕｉ後端層將每乙個節點繪製出來。
以上步驟是乙個漸進的過程，為了提高使用者體驗，渲染引擎試圖盡可能快的把結果顯示給終端使用者。它不會等到所有ｈｔｍｌ都被解析完才建立並布局渲染樹。它會在從網路層獲取文件內容的同時把已經接收到的區域性內容先展示出來。
不同渲染引擎具體不同的渲染流程
上面只是介紹了渲染引擎一般的處理流程，針對不同的渲染引擎具體步驟可能有所不同，就拿常見的webkit跟gecko來說吧。
首先是webkit的詳細渲染流程:
火狐等瀏覽器的gecko渲染流程:
了解瀏覽器如何工作 渲染引擎
樹 渲染樹 render tree 渲染樹包含帶有顏色，尺寸等顯示屬性的矩形，這些矩形的順序與顯示順序一致。然後就是對渲染樹的每個節點進行布局處理，確定其在螢幕上的顯示位置。最後 就是遍歷渲染樹並用上一章提到的 後端層將每乙個節點繪製出來。以上步驟是乙個漸進的過程，為了提高使用者體驗，渲染引擎試圖盡...
瀏覽器工作原理2 渲染引擎
介紹 渲染引擎 解析與dom樹構建 渲染樹構建 布局繪製 動態變化 渲染引擎的執行緒 css2可視模型 渲染引擎的職責就是渲染，即在瀏覽器視窗中顯示所請求的內容。預設情況下，渲染引擎可以顯示html xml文件及，它也可以借助外掛程式 一種瀏覽器擴充套件 顯示其他型別資料，例如使用pdf閱讀器外掛程...
瀏覽器工作原理之渲染引擎
備註 文件物件模型 document object model，簡稱dom 1.關於css阻塞 宣告 只有link引入的外部css才能夠產生阻塞。1.style標籤中的樣式 1 由html解析器進行解析 2 不阻塞瀏覽器渲染 可能會產生 閃屏現象 3 不阻塞dom解析 1 由css解析器進行解析。2...