瀏覽器的工作原理整理

lijinke666 發(fā)布于2019-08-26 12:22 / 2276人閱讀

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

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

瀏覽器的主要組件包括：

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

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

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

渲染引擎——負(fù)責(zé)顯示請求的內(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)用提供底層實(shí)現(xiàn)。

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

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

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

瀏覽器進(jìn)程與線程

進(jìn)程是cpu資源分配的最小單位（是能擁有資源和獨(dú)立運(yùn)行的最小單位）

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

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

瀏覽器的進(jìn)程為以下幾種：

Browser進(jìn)程：瀏覽器的主進(jìn)程（負(fù)責(zé)協(xié)調(diào)、主控），只有一個(gè)

第三方插件進(jìn)程：每種類型的插件對應(yīng)一個(gè)進(jìn)程，僅當(dāng)使用該插件的時(shí)候才創(chuàng)建

GPU進(jìn)程：最多一個(gè)，用于3D繪制

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

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

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

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

事件觸發(fā)線程

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

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

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

進(jìn)程之間的通信

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

管道：速度慢，容量有限，只有父子進(jìn)程能通訊

FIFO：任何進(jìn)程間都能通訊，但速度慢

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

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

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

由于瀏覽器每一個(gè)tab頁面即為一個(gè)進(jìn)程，頁面間的通信即為進(jìn)程的通信

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

渲染引擎

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

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

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