瀏覽器的工作原理整理

DrizzleX 發(fā)布于2019-08-29 17:15 / 1494人閱讀

摘要：渲染引擎渲染引擎也稱為瀏覽器內(nèi)核，主要時在瀏覽器窗口中顯示所請求的內(nèi)容，這是每個瀏覽器的核心部分。

瀏覽器的結(jié)構(gòu)

瀏覽器的主要組件包括：

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

用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應(yīng)用無關(guān)的通用接口，而在底層使用操作系統(tǒng)的用戶界面方法。

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

渲染引擎——負責顯示請求的內(nèi)容。如果請求的內(nèi)容是HTML,它就解析HTML和css內(nèi)容，并將解析后的內(nèi)容顯示在窗口上。

網(wǎng)絡(luò)——用于網(wǎng)絡(luò)調(diào)用。比如http請求。其接口與web應(yīng)用無關(guān)，并為所有web應(yīng)用提供底層實現(xiàn)。

JavaScript解釋器。用于解析和執(zhí)行 JavaScript 代碼，比如chrome的javascript解釋器是V8。

數(shù)據(jù)存儲。這是持久層。瀏覽器需要在硬盤上保存各種數(shù)據(jù)，例如cookie。新的HTML5規(guī)范定義了“網(wǎng)絡(luò)數(shù)據(jù)庫”，這是一個完整的且輕便的瀏覽器內(nèi)數(shù)據(jù)庫。

值得注意的是，不同于大多數(shù)瀏覽器，chrome瀏覽器為每個標簽頁都分配了各自的渲染引擎實例，每個標簽頁都是一個獨立的進程（即每個標簽頁都在獨立的“沙箱”內(nèi)運行，在提高安全性的同時，一個標簽頁面崩潰也不會導致其他的標簽頁被關(guān)閉）

瀏覽器進程與線程

進程是cpu資源分配的最小單位（是能擁有資源和獨立運行的最小單位）

線程是cpu調(diào)度的最小單位（線程是建立在進程的基礎(chǔ)上的一次程序運行單位，一個進程可以有多個線程）

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

瀏覽器的進程為以下幾種：

Browser進程：瀏覽器的主進程（負責協(xié)調(diào)、主控），只有一個

第三方插件進程：每種類型的插件對應(yīng)一個進程，僅當使用該插件的時候才創(chuàng)建

GPU進程：最多一個，用于3D繪制

瀏覽器渲染進程（內(nèi)核）：默認每個tab頁面一個進程，互不影響，控制頁面渲染，腳本執(zhí)行，事件處理等（有時會優(yōu)化，如多個空白tab會合成一個進程）

每一個tab頁面可以看作是瀏覽器內(nèi)核進程，然后這個進程是多線程的，他又幾大類子線程：

GUI線程
注意：GUI渲染線程與js引擎線程是互斥的，當js引擎執(zhí)行時GUI線程會被掛起（相當于被凍結(jié)），GUI更新會被保存在一個隊列中等到Js引擎空閑時立即被執(zhí)行

JS引擎線程
js引擎一直等待著任務(wù)隊列中任務(wù)的到來，然后加以處理，一個tab頁中無論什么時候都只有一個js線程在運行js程序

事件觸發(fā)線程

定時器線程
setInterval與setTimeout所在的線程
瀏覽器定時器計數(shù)器并不是由js引擎計數(shù)的，（因為js引擎時單線程的，如果處于阻塞線程狀態(tài)就會影響計時的準確）
因此通過單線程來計時并觸發(fā)定時（計時完畢后，添加到事件隊列中，等待js引擎空閑后執(zhí)行）
注意，W3C在HTML標準中規(guī)定，規(guī)定要求setTimeout中低于4ms的時間間隔算為4ms。

網(wǎng)絡(luò)請求線程
在XMLHttpRequest在連接后是通過瀏覽器新開一個線程請求
將檢測到狀態(tài)變更時，如果設(shè)置有回調(diào)函數(shù)，異步線程就產(chǎn)生狀態(tài)變更事件，將這個回調(diào)再放入事件隊列中。再由JavaScript引擎執(zhí)行。

每次網(wǎng)絡(luò)請求時都需要開辟多帶帶的線程進行，譬如如果URL解析到http協(xié)議，就會新建一個網(wǎng)絡(luò)線程去處理資源下載。因此瀏覽器會根據(jù)解析出得協(xié)議，開辟一個網(wǎng)絡(luò)線程，前往請求資源

進程之間的通信

五種通訊方式總結(jié)：

管道：速度慢，容量有限，只有父子進程能通訊

FIFO：任何進程間都能通訊，但速度慢

消息隊列：容量受到系統(tǒng)限制，且要注意第一次讀的時候，要考慮上一次沒有讀完的數(shù)據(jù)的問題

信號量：不能傳遞復(fù)雜消息，只能用來同步

共享內(nèi)存區(qū)：能夠很容易控制容量，速度快，但要保持同步，比如一個進程在寫的時候，另一個進程要注意讀寫的問題，相當于線程種的線程安全，當然，共享內(nèi)存區(qū)同樣可以用作線程間通訊，不過沒有這個必要，線程間本來就已經(jīng)共享了統(tǒng)一進程內(nèi)的一塊內(nèi)存。

由于瀏覽器每一個tab頁面即為一個進程，頁面間的通信即為進程的通信

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

渲染引擎

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

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

渲染流程：
渲染引擎一開始會從網(wǎng)絡(luò)層獲取請求的文檔的內(nèi)容，通常以8k分塊的方式完成，獲取了文檔內(nèi)容之后，渲染引擎開始正式工作
渲染引擎解析HTML文檔，并將文檔中的標簽轉(zhuǎn)化為dom節(jié)點樹，同時，它會解析外部css文件以及style標簽中的樣式數(shù)據(jù)。這些樣式信息連同HTML中的可見內(nèi)容一起，被用于構(gòu)建另一顆樹——渲染樹（RenderTree）。
渲染樹由一些帶有視覺屬性（如顏色、大小等）的矩形組成，這些矩形將按照正確的順序顯示在屏幕上。
渲染樹構(gòu)建完畢之后，將會進入“布局”處理階段，即為每一個節(jié)點分配一個屏幕坐標。再下一步就是繪制，即遍歷renderTree，并使用UI后端層繪制每個節(jié)點。
注意：這個過程時逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能的早的將內(nèi)容呈現(xiàn)在屏幕上，并不會等到所有的Html都解析完成之后再去構(gòu)建和布局renderTree。它時解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。