五分鐘瞭解瀏覽器的工做原理

時間 2020-05-14

原文原文鏈接

Web 瀏覽器無疑是用戶訪問互聯網最多見的入口。瀏覽器憑藉其免安裝和跨平臺等優點，逐漸取代了不少傳統的富客戶端。javascript

Web 瀏覽器經過向 URL 發送網絡請求來訪問 Web 服務器資源，並以交互性的方式展現這些內容。基本操做包括獲取、處理、顯示和存儲。常見的瀏覽器包括 Internet Explorer、Firefox、谷歌 Chrome、Safari 和 Opera 等。css

架構圖

瀏覽器主要由如下幾個部分組成：html

用戶界面
瀏覽器引擎
渲染引擎
數據存儲層
UI BackEnd
JavaScript 解析器 (腳本引擎)
網絡層

用戶界面

這是用戶與瀏覽器發生交互的區域。瀏覽器的外觀沒有特定的標準，HTML5 規範沒有規定 UI 元素該長什麼樣，可是列了一些常見元素：地址欄、我的信息欄、滾動條、狀態欄和工具欄等。html5

瀏覽器引擎

它提供了 UI 與底層渲染引擎之間的接口，根據用戶交互進行查詢和操控渲染引擎，提供初始化加載 URL 的方法，並負責從新加載、返回和前進等操做。java

渲染引擎

渲染引擎負責在屏幕上顯示網頁內容。渲染引擎的主要工做是解析 HTML。渲染引擎默承認展現 HTML、XML和圖片，還能夠經過插件或擴展程序支持其餘數據類型。
web

現代瀏覽器使用不一樣的渲染引擎。
Gecko： Firefox
Webkit：Safari
Blink：Chrome, Opera (version 15 onwards).數據庫

web 內容是經過一系列的過程顯示出來的：瀏覽器

HTML 數據轉成 DOM

來自網絡層的請求內容在渲染引擎中接收(一般是 8 kb 的塊)，而後將原始字節轉換爲 HTML 文件中的字符(基於字符編碼)。接着詞法分析器進行詞法分析，將輸入分解爲各類標記（token）。在標記化過程當中，文件中的每一個開始和結束標籤都被記錄下來。它知道如何去掉不相關的字符，好比空格和換行符。緩存

接着，解析器進行語法分析，經過分析文檔結構，應用語言語法規則構造解析樹。解析過程是迭代進行的。它向詞法分析器請求新的 token，若是匹配語法規則，token 就被添加到解析樹中。而後再請求另外一個 token。若是沒有匹配的規則，解析器將在內部存儲 token，並不斷請求新 token，直到找到匹配全部內部存儲 token 的規則。若是沒有找到規則，解析器將拋出異常，說明文檔無效，包含語法錯誤。服務器

這些節點在 DOM(文檔對象模型)樹數據結構中互相連接，創建父子關係、相鄰兄弟關係。

CSS 數據轉成 CSSOM

CSS 數據原始字節被轉換成字符、token、節點，最終變成 CSSOM（CSS 對象模型）。CSS 的層級特性決定了元素會應用什麼樣式。元素的樣式數據能夠來自父元素（經過繼承），也能夠直接在元素上設置。瀏覽器須要遞歸遍歷 CSS 樹結構來肯定特定元素的樣式。

DOM 與 CSSOM 組成渲染樹

DOM 樹包含了 HTML 元素之間的關係信息，CSSOM 樹則包含了這些元素的樣式信息。從根節點開始，瀏覽器會遍歷每個可見節點。有些節點是隱藏的（經過 CSS 控制），不會出如今渲染結果中。對於每一個可見節點，瀏覽器找到 CSSOM 中定義的相關規則進行匹配，最終這些節點會帶着內容和樣式出如今渲染樹中。

佈局

接下來進行內容佈局。內容的實際尺寸和位置須要通過計算才能渲染到頁面上（瀏覽器視口）。這個過程也叫重排（reflow）。HTML 採用基於流的佈局模型，也就是說大部分狀況下，幾何位置是一次性計算出來的（內容大小或位置發生變化，須要從新計算）。這個過程是從文檔根元素開始，遞歸完成的。

繪製

經過遍歷每一個渲染器，並調用paint方法在屏幕上顯示內容。繪製過程能夠是全局的（繪製整個樹），也能夠是增量的（渲染樹在屏幕上驗證某個矩形區域），操做系統在這些特定節點上生成繪製事件，整個樹不受影響。繪製是一個漸進的過程，其中一部分在被解析和渲染事後，而該過程將繼續處理其他部分。

JavaScript 解析器 (JS 引擎)

JavaScript 是一種腳本語言，可動態更新 Web 內容、控制多媒體和動畫等，這些是經過瀏覽器的 JS 引擎完成的。DOM 和 CSSOM 提供了 JS 接口，均可以經過 JS 修改。因爲瀏覽器不肯定某些 JS 會作什麼，所以它會在遇到 script 標籤後會當即暫停構建 DOM 樹。

JS 解析器在接收到服務器發送來的代碼後，會當即進行解析。代碼被轉換成機器能理解的對象表示形式。保存了全部解析信息的對象叫作抽象語法樹（AST），這些對象又被解析器轉換成字節碼。這種編譯方式叫作Just In Time (JITs) ，也就是 JavaScript 從服務器下載後在客戶端實時編譯。解析器和編譯器是組合使用的，解析器當即處理源代碼，編譯器則生成機器碼，客戶端操做系統可直接運行。

不一樣瀏覽器的 JS 引擎

Chrome: V8 引擎 (Node JS was built on top of this)
Mozilla: Spider Monkey (之前叫 ‘Squirrel Fish’)
Microsoft Edge: Chakra
Safari: Nitro

UI Back End

用於繪製基礎控件，好比複選框和窗口等。底層使用操做系統的用戶界面方法，暴露通用的接口，跟平臺無關。

數據存儲層

這是持久化層，輔助瀏覽器保存一些數據（好比cookies，session storage，indexed DB，Web SQL，書籤，用戶偏好設置等）。HTML5 規範提出了瀏覽器端的完整數據庫功能。

網絡層

這一層處理瀏覽器的各類網絡通訊。瀏覽器使用各類通訊協議獲取網絡資源，好比 HTTP、HTTPs、FTP 等。

瀏覽器用 DNS 解析 URL。這些解析記錄緩存在瀏覽器、操做系統、路由器或者 ISP 中。若是請求的 URL 不在緩存中，ISP 的 DNS 服務器首先發起 DNS 查詢，找到服務器的 IP 地址。找到正確的 IP 地址後，瀏覽器使用特定的協議與服務器創建鏈接。瀏覽器向服務器發送 SYN 數據包，詢問服務器是否打開了 TCP 鏈接。服務器用 SYN/ACK 數據包響應做爲前面 SYN 的應答。

瀏覽器接收到應答後，再向服務器發送 ACK 數據包。經過這樣的三次握手就創建了 TCP 鏈接。一旦創建了鏈接，就能夠傳輸數據了。傳輸數據過程當中必須遵照 HTTP 協議的相關要求，包括請求和響應的規則等。