WEB瀏覽器工作原理(1)

時(shí)間：2023-07-03 08:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-03 08:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

WEB瀏覽器工作原理(1)：

譯者：虛痕

瀏覽器是web開(kāi)發(fā)的基石，是web最底層的運(yùn)行環(huán)境，支撐了整個(gè)web技術(shù)的發(fā)展，深入了解瀏覽器原理對(duì)每一個(gè)web開(kāi)發(fā)同學(xué)都大有益處。

瀏覽器的架構(gòu)

瀏覽器的主要組件：

瀏覽器的主要組件

1. 用戶界面：用戶界面是用戶與瀏覽器進(jìn)行交互的模塊。
   它包括地址欄，后退和下一步按鈕，主頁(yè)按鈕，等一系列與用戶操作事件的息息相關(guān)的工作。
2. 瀏覽器引擎：瀏覽器引擎充當(dāng)用戶界面和渲染引擎之間的橋梁。
   所有的用戶輸入動(dòng)作，都需要通過(guò)瀏覽器引擎分析過(guò)后再操作渲染引擎做出可視化的響應(yīng)。
3. 渲染引擎：渲染引擎負(fù)責(zé)在瀏覽器屏幕上呈現(xiàn)所請(qǐng)求的網(wǎng)頁(yè)。
   分析CSS格式化的HTML，XML文檔和圖像，并生成用于用戶界面中顯示的布局。
   并且還可使用插件或擴(kuò)展來(lái)顯示其他類型的數(shù)據(jù)。
   不同的瀏覽器使用不同的渲染引擎：
   
   * Internet Explorer：Trident （最新版已經(jīng)使用Chrome內(nèi)核）
   
   * Firefox和其他Mozilla瀏覽器：Gecko
   
   * Chrome和Opera 15+：Blink
   
   * Chrome（iPhone）和Safari：Webkit
4. 網(wǎng)絡(luò)：網(wǎng)絡(luò)模塊，使用HTTP或FTP的常見(jiàn)Internet協(xié)議分析URL。
   網(wǎng)絡(luò)組件處理Internet通信和安全性的所有事務(wù)。
   網(wǎng)絡(luò)組件可以實(shí)現(xiàn)文檔的緩存，以減少網(wǎng)絡(luò)流量。
5. JavaScript解釋器：它是瀏覽器的組件，用于解析和執(zhí)行網(wǎng)站中嵌入的javascript代碼。
   解析后的結(jié)果將發(fā)送到渲染引擎進(jìn)行顯示。
   如果腳本是外部的，則首先從網(wǎng)絡(luò)中獲取資源。
   解析器將保持暫停狀態(tài)，直到執(zhí)行腳本為止。
6. UI后臺(tái)：UI后臺(tái)用于繪制基本小部件，例如組合框和窗口。
   它在下面使用操作系統(tǒng)最底層的UI方法。
7. 數(shù)據(jù)持久性/存儲(chǔ)：這是一個(gè)持久性層。
   瀏覽器支持諸如localStorage，IndexedDB，WebSQL和FileSystem之類的存儲(chǔ)機(jī)制。
   它可以在安裝了瀏覽器的機(jī)器磁盤(pán)上創(chuàng)建小型數(shù)據(jù)庫(kù)。
   用于管理用戶數(shù)據(jù)，例如緩存，cookie，書(shū)簽和首選項(xiàng)。

這里要注意的重要一點(diǎn)是，在chrome等網(wǎng)絡(luò)瀏覽器中，每個(gè)選項(xiàng)卡都在單獨(dú)的進(jìn)程（多個(gè)渲染引擎實(shí)例）中運(yùn)行。

渲染引擎

網(wǎng)絡(luò)層將開(kāi)始以塊的形式將請(qǐng)求文檔的內(nèi)容發(fā)送到渲染引擎。







渲染引擎基本流程

渲染引擎解析HTML文檔的數(shù)據(jù)塊，并將元素轉(zhuǎn)換為樹(shù)中的“節(jié)點(diǎn)
樹(shù)”或“DOM樹(shù)”中的DOM節(jié)點(diǎn)。
它還會(huì)解析外部CSS文件以及樣式元素。


在構(gòu)建DOM樹(shù)時(shí)，瀏覽器將構(gòu)建另一棵樹(shù)，即渲染樹(shù)。
該樹(shù)按順序顯示視覺(jué)元素。
它是文檔的視覺(jué)表達(dá)。
該樹(shù)的目的是使用正確的順序繪制可視內(nèi)容。
WebKit使用術(shù)語(yǔ)渲染器或渲染對(duì)象。


構(gòu)建渲染樹(shù)之后，它會(huì)經(jīng)歷渲染樹(shù)的“布局過(guò)程”。
創(chuàng)建渲染器并將其添加到樹(shù)時(shí)，它沒(méi)有位置和大小。
計(jì)算這些值的過(guò)程稱為布局或回流。
這意味著為每個(gè)節(jié)點(diǎn)計(jì)算應(yīng)在屏幕上顯示的確切坐標(biāo)。
根渲染器的位置為0,0，其尺寸為瀏覽器窗口的可見(jiàn)部分。
所有渲染器都有一個(gè)“布局”或“重排”的方法，每個(gè)渲染器都需要調(diào)用布局方法。


下一階段是
繪畫(huà)。
在繪畫(huà)階段，遍歷渲染樹(shù)，并調(diào)用渲染器的“ paint（）”方法以在屏幕上顯示內(nèi)容。
繪畫(huà)使用UI后臺(tái)層（chrome使用的底層制圖引擎是 skia）。

原文引用至：
medium.com/@monica1109…