瀏覽器的工做原理整理

瀏覽器的結構

瀏覽器的主要組件包括：

1. 用戶界面——包括地址欄、前進/後退按鈕、書籤菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其餘顯示的各個部分都屬於用戶界面。

2. 用戶界面後端——用於繪製基本的窗口小部件，好比組合框和窗口。其公開了與web應用無關的通用接口，而在底層使用操做系統的用戶界面方法。

3. 瀏覽器引擎——在用戶界面和渲染引擎之間傳遞指令。

4. 渲染引擎——負責顯示請求的內容。若是請求的內容是HTML,它就解析HTML和css內容，並將解析後的內容顯示在窗口上。

5. 網絡——用於網絡調用。好比http請求。其接口與web應用無關，併爲全部web應用提供底層實現。

6. JavaScript解釋器。用於解析和執行 JavaScript 代碼，好比chrome的javascript解釋器是V8。

7. 數據存儲。這是持久層。瀏覽器須要在硬盤上保存各類數據，例如cookie。新的HTML5規範定義了「網絡數據庫」，這是一個完整的且輕便的瀏覽器內數據庫。

值得注意的是，不一樣於大多數瀏覽器，chrome瀏覽器爲每一個標籤頁都分配了各自的渲染引擎實例，每一個標籤頁都是一個獨立的進程（即每一個標籤頁都在獨立的「沙箱」內運行，在提升安全性的同時，一個標籤頁面崩潰也不會致使其餘的標籤頁被關閉）

---

瀏覽器進程與線程

• 進程是cpu資源分配的最小單位（是能擁有資源和獨立運行的最小單位）
• 線程是cpu調度的最小單位（線程是創建在進程的基礎上的一次程序運行單位，一個進程能夠有多個線程）

瀏覽器是多進程的，有一個主控進程，以及每個tab頁面都會新開一個進程（某些狀況下多個tab會合並進程）

瀏覽器的進程爲如下幾種：

• Browser進程：瀏覽器的主進程（負責協調、主控），只有一個
• 第三方插件進程：每種類型的插件對應一個進程，僅當使用該插件的時候才建立
• GPU進程：最多一個，用於3D繪製
• 瀏覽器渲染進程（內核）：默認每一個tab頁面一個進程，互不影響，控制頁面渲染，腳本執行，事件處理等（有時會優化，如多個空白tab會合成一個進程）

每個tab頁面能夠看做是瀏覽器內核進程，而後這個進程是多線程的，他又幾大類子線程：

• GUI線程
  注意：GUI渲染線程與js引擎線程是互斥的，當js引擎執行時GUI線程會被掛起（至關於被凍結），GUI更新會被保存在一個隊列中等到Js引擎空閒時當即被執行
• JS引擎線程
  js引擎一直等待着任務隊列中任務的到來，而後加以處理，一個tab頁中不管何時都只有一個js線程在運行js程序
• 事件觸發線程
• 定時器線程
  setInterval與setTimeout所在的線程
  瀏覽器定時器計數器並非由js引擎計數的，（由於js引擎時單線程的，若是處於阻塞線程狀態就會影響計時的準確）
  所以經過單線程來計時並觸發定時（計時完畢後，添加到事件隊列中，等待js引擎空閒後執行）
  注意，W3C在HTML標準中規定，規定要求setTimeout中低於4ms的時間間隔算爲4ms。
• 網絡請求線程
  在XMLHttpRequest在鏈接後是經過瀏覽器新開一個線程請求
  將檢測到狀態變動時，若是設置有回調函數，異步線程就產生狀態變動事件，將這個回調再放入事件隊列中。再由JavaScript引擎執行。

每次網絡請求時都須要開闢單獨的線程進行，譬如若是URL解析到http協議，就會新建一個網絡線程去處理資源下載。所以瀏覽器會根據解析出得協議，開闢一個網絡線程，前往請求資源

進程之間的通訊

五種通信方式總結：

1. 管道：速度慢，容量有限，只有父子進程能通信
2. FIFO：任何進程間都能通信，但速度慢
3. 消息隊列：容量受到系統限制，且要注意第一次讀的時候，要考慮上一次沒有讀完的數據的問題
4. 信號量：不能傳遞複雜消息，只能用來同步
5. 共享內存區：可以很容易控制容量，速度快，但要保持同步，好比一個進程在寫的時候，另外一個進程要注意讀寫的問題，至關於線程種的線程安全，固然，共享內存區一樣能夠用做線程間通信，不過沒有這個必要，線程間原本就已經共享了統一進程內的一塊內存。

因爲瀏覽器每個tab頁面即爲一個進程，頁面間的通訊即爲進程的通訊

1. window.open(url,name,featrues,replace)
   url:(可選)爲空則打開空白新窗口
   name：（可選）子窗口的句柄。聲明新窗口的名稱。若名字已存在則在指定窗口打開。僅當同源或該腳本打開了這個窗口才能夠經過名字進項指定窗口
   Features (可選) 聲明新窗口要顯示的標準瀏覽器的特徵(必須是打開空白窗口)。
   Replace(可選) 爲true的話則替換瀏覽歷史中的當前條目(返回回不去)，默認爲false,建立新條目。

---

渲染引擎

渲染引擎也稱爲瀏覽器內核，主要時在瀏覽器窗口中顯示所請求的內容，這是每一個瀏覽器的核心部分。

常見的瀏覽器渲染引擎有兩種：一是firefox使用的Gecko，這是Mozilla公司「自制」的渲染引擎。另外一個是safari和chrome使用的都是webkit。

渲染流程：渲染引擎一開始會從網絡層獲取請求的文檔的內容，一般以8k分塊的方式完成，獲取了文檔內容以後，渲染引擎開始正式工做渲染引擎解析HTML文檔，並將文檔中的標籤轉化爲dom節點樹，同時，它會解析外部css文件以及style標籤中的樣式數據。這些樣式信息連同HTML中的可見內容一塊兒，被用於構建另外一顆樹——渲染樹（RenderTree）。渲染樹由一些帶有視覺屬性（如顏色、大小等）的矩形組成，這些矩形將按照正確的順序顯示在屏幕上。渲染樹構建完畢以後，將會進入「佈局」處理階段，即爲每個節點分配一個屏幕座標。再下一步就是繪製，即遍歷renderTree，並使用UI後端層繪製每一個節點。注意：這個過程時逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡量的早的將內容呈如今屏幕上，並不會等到全部的Html都解析完成以後再去構建和佈局renderTree。它時解析完一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容。