WEB瀏覽器工做原理(1)

譯者：虛痕

瀏覽器是web開發的基石，是web最底層的運行環境，支撐了整個web技術的發展，深刻了解瀏覽器原理對每個web開發同窗都大有益處 。

瀏覽器的架構

瀏覽器的主要組件：

瀏覽器的主要組件

1. 用戶界面
   ：用戶界面是用戶與瀏覽器進行交互的模塊。

   它包括地址欄，後退和下一步按鈕，主頁按鈕，等一系列與用戶操做事件的息息相關的工做。
2. 瀏覽器引擎
   ：瀏覽器引擎充當用戶界面和渲染引擎之間的橋樑。

   全部的用戶輸入動做，都須要經過瀏覽器引擎分析事後再操做渲染引擎作出可視化的響應。
3. 渲染引擎
   ：渲染引擎負責在瀏覽器屏幕上呈現所請求的網頁。

   分析CSS格式化的HTML，XML文檔和圖像，並生成用於用戶界面中顯示的佈局。

   而且還可以使用插件或擴展來顯示其餘類型的數據。

   不一樣的瀏覽器使用不一樣的渲染引擎：
   
   
   * Internet Explorer：Trident （最新版已經使用Chrome內核）
   
   
   * Firefox和其餘Mozilla瀏覽器：Gecko
   
   
   * Chrome和Opera 15+：Blink
   
   
   * Chrome（iPhone）和Safari：Webkit
4. 網絡
   ：網絡模塊，使用HTTP或FTP的常見Internet協議分析URL。

   網絡組件處理Internet通訊和安全性的全部事務。

   網絡組件能夠實現文檔的緩存，以減小網絡流量。
5. JavaScript解釋器：
   它是瀏覽器的組件，用於解析和執行網站中嵌入的javascript代碼。

   解析後的結果將發送到渲染引擎進行顯示。

   若是腳本是外部的，則首先從網絡中獲取資源。

   解析器將保持暫停狀態，直到執行腳本爲止。
6. UI後臺
   ：UI後臺用於繪製基本小部件，例如組合框和窗口。

   它在下面使用操做系統最底層的UI方法。
7. 數據持久性/存儲：
   這是一個持久性層。

   瀏覽器支持諸如localStorage，IndexedDB，WebSQL和FileSystem之類的存儲機制。

   它能夠在安裝了瀏覽器的機器磁盤上建立小型數據庫。

   用於管理用戶數據，例如緩存，cookie，書籤和首選項。

這裏要注意的重要一點是，在chrome等網絡瀏覽器中，每一個選項卡都在單獨的進程（多個渲染引擎實例）中運行。

渲染引擎

網絡層將開始以塊的形式將請求文檔的內容發送到渲染引擎。

渲染引擎基本流程

渲染引擎解析HTML文檔的數據塊，並將元素轉換爲樹中的「節點

樹 」或「 DOM樹 」中的 DOM節點 。

它還會解析外部CSS文件以及樣式元素。

在構建DOM樹時，瀏覽器將構建另外一棵樹，即 渲染樹 。

該樹按順序顯示視覺元素。

它是文檔的視覺表達。

該樹的目的是使用正確的順序繪製可視內容。

WebKit使用術語渲染器或渲染對象。

構建渲染樹以後，它會經歷渲染樹的「 佈局過程 」。

建立渲染器並將其添加到樹時，它沒有位置和大小。

計算這些值的過程稱爲佈局或迴流。

這意味着爲每一個節點計算應在屏幕上顯示的確切座標。

根渲染器的位置爲0,0，其尺寸爲瀏覽器窗口的可見部分。

全部渲染器都有一個「佈局」或「重排」的方法，每一個渲染器都須要調用佈局方法。

下一階段是

繪畫 。

在繪畫階段，遍歷渲染樹，並調用渲染器的「 paint（）」方法以在屏幕上顯示內容。

繪畫使用UI後臺層（chrome使用的底層製圖引擎是 skia）。

原文引用至：

medium.com/@monica1109…