瀏覽器基本的工做原理

一，瀏覽器的主要功能

就是向服務器發出請求，在瀏覽器窗口中展現您選擇的網絡資源，資源通常是指 HTML 文檔，也能夠是 PDF、圖片或其餘的類型。資源的位置由用戶使用 URI（統一資源標示符）指定。

二，瀏覽器的組件

 

 

1. 用戶界面 - 包括地址欄、前進/後退按鈕、書籤菜單等。
2.  瀏覽器引擎 - 在用戶界面和呈現引擎之間傳送指令。
3. 呈現引擎 - 負責顯示請求的內容。若是請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在屏幕上。
4. 網絡 - 用於網絡調用，好比 HTTP 請求。其接口與平臺無關，併爲全部平臺提供底層實現。
5. 用戶界面後端 - 用於繪製基本的窗口小部件，好比組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操做系統的用戶界面方法。
6. JavaScript 解釋器。用於解析和執行 JavaScript 代碼。
7. 數據存儲。這是持久層。瀏覽器須要在硬盤上保存各類數據，例如 Cookie。新的 HTML 規範 (HTML5) 定義了「網絡數據庫」，這是一個完整（可是輕便）的瀏覽器內數據庫。

 三，呈現引擎　　

       /*渲染引擎主流程*/　

　　webkit 主流程

 　  

 

　　Mozilla 的 Gecko 呈現引擎主流程 

        

       雖然 WebKit 和 Gecko 使用的術語略有不一樣，但總體流程是基本相同的。Gecko 將視覺格式化元素組成的樹稱爲「框架樹」。每一個元素都是一個框架。WebKit 使用的術語是「呈現樹」，它由「呈現對象」組成。對於元素的放置，WebKit 使用的術語是「佈局」，而 Gecko 稱之爲「重排」。對於鏈接 DOM 節點和可視化信息從而建立呈現樹的過程，WebKit 使用的術語是「附加」。有一個細微的非語義差異，就是 Gecko 在 HTML 與 DOM 樹之間還有一個稱爲「內容槽」的層，用於生成 DOM 元素。

　　

本文所討論的瀏覽器——Firefox、Chrome和Safari是基於兩種渲染引擎構建的，Firefox使用Geoko——Mozilla自主研發的渲染引擎，Safari和Chrome都使用webkit。

　　瀏覽器渲染引擎工做流程都差很少

       呈現引擎一開始會從網絡層獲取請求文檔的內容，內容的大小通常限制在 8k個塊之內

　　

       解析 HTML 文檔，逐個轉化成DOM樹。同時解析外部 CSS 文件以及樣式元素生成CSSOM樹。HTML 中這些帶有視覺指令的樣式信息將用於建立另外一個樹結構：呈現樹(Render樹)

      呈現樹包含多個帶有視覺屬性（如顏色和尺寸）的矩形。這些矩形的排列順序就是它們將在屏幕上顯示的順序。

      呈現樹構建完畢以後，進入「佈局」，爲每一個節點分配一個應出如今屏幕上的確切座標。遍歷呈現樹，由用戶界面後端層將每一個節點繪製出來。

      這是一個漸進的過程。沒必要整個 HTML 文檔解析完畢以後，就會開始構建呈現樹和設置佈局。在不斷接收和處理來自網絡的其他內容的同時，呈現引擎會將部份內容解析並顯示出來。

      Render樹是DOM樹和CSSOM樹構建完畢纔開始構建的嗎？這三個過程在實際進行的時候又不是徹底獨立，而是會有交叉。會形成一邊加載，一遍解析，一遍渲染的工做現象。

　　簡而言之呢

1. HTML解析成DOM樹
2. CSS解析成CSSOM樹
3. 二者結合成Render樹
4. Layout 根據Render Tree計算每一個節點的信息　
5. Painting 根據計算好的信息繪製整個頁面　

        這裏面每一步都須要大量的工做，在傳統的開發模式中，原生JS或JQ操做DOM時，瀏覽器會從構建DOM樹，從頭至尾執行一遍。

　　因此就有了虛擬DOM，將在下一篇文章總結虛擬DOM