瀏覽器工作原理

崔滔

Web瀏覽器無疑是用戶訪問互聯(lián)網(wǎng)很常見的入口，其借免安裝和跨平臺(tái)等優(yōu)勢(shì)，逐漸取代了很多傳統(tǒng)的客戶端。

Web瀏覽器通過向URL發(fā)送網(wǎng)絡(luò)請(qǐng)求來訪問Web服務(wù)器資源，并以交互性的方式展示這些內(nèi)容?；静僮靼ǐ@取、處理、顯示和存儲(chǔ)，常見的瀏覽器包括Internet Explorer，F(xiàn)irefox，Chrome，Safari，Opera等。

用戶界面

這是用戶與瀏覽器發(fā)生交互的區(qū)域。瀏覽器的外觀沒有特定的標(biāo)準(zhǔn)，HTML5規(guī)范沒有規(guī)定UI元素該長什么樣，但是列出了一些常見元素：地址欄、個(gè)人信息欄、滾動(dòng)條、狀態(tài)欄和工具欄等。

瀏覽器引擎

它提供了UI與底層渲染引擎之間的接口，根據(jù)用戶交互進(jìn)行查詢和操控渲染引擎，提供初始化加載URL的方法，并負(fù)責(zé)重新加載、返回和前進(jìn)等操作。

渲染引擎

渲染引擎負(fù)責(zé)在屏幕上顯示網(wǎng)頁內(nèi)容，其主要工作是解析HTML。渲染引擎默認(rèn)可展示HTML、XML和圖片，還可以通過插件或擴(kuò)展程序支持其他數(shù)據(jù)類型。

Web內(nèi)容渲染過程大致如下：

HTML數(shù)據(jù)轉(zhuǎn)成DOM

來自網(wǎng)絡(luò)層的請(qǐng)求內(nèi)容在渲染引擎中接收（通常是8 KB的塊），然后將原始字節(jié)轉(zhuǎn)換為HTML文件中的字符（基于字符編碼）。接著詞法分析器進(jìn)行詞法分析，將輸入分解為各種標(biāo)記（token），在標(biāo)記化過程中，文件中的每個(gè)開始和結(jié)束標(biāo)簽都被記錄下來。它知道如何去掉不相關(guān)的字符，比如空格和換行符。

接著，解析器進(jìn)行語法分析，通過分析文檔結(jié)構(gòu)，應(yīng)用語言語法規(guī)則構(gòu)造解析樹。解析過程是迭代進(jìn)行的，它向詞法分析器請(qǐng)求新的token，如果匹配語法規(guī)則，token就被添加到解析樹中，然后再請(qǐng)求另一個(gè)token。如果沒有匹配的規(guī)則，解析器將在內(nèi)部存儲(chǔ)token，并不斷請(qǐng)求新token，直到找到匹配所有內(nèi)部存儲(chǔ)token的規(guī)則。如果沒有找到規(guī)則，解析器將拋出異常，說明文檔無效或包含語法錯(cuò)誤。

這些節(jié)點(diǎn)在文檔對(duì)象模型（DOM）樹數(shù)據(jù)結(jié)構(gòu)中互相鏈接，建立父子關(guān)系、相鄰兄弟關(guān)系。

CSS數(shù)據(jù)轉(zhuǎn)成CSSOM

CSS數(shù)據(jù)原始字節(jié)被轉(zhuǎn)換成字符、token和節(jié)點(diǎn)，最終變成CSS對(duì)象模型（CSSOM）。CSS的層級(jí)特性決定了元素會(huì)應(yīng)用什么樣式。元素的樣式數(shù)據(jù)可以來自父元素（通過繼承），也可以直接在元素上設(shè)置。瀏覽器需要遞歸遍歷CSS樹結(jié)構(gòu)來確定特定元素的樣式。

DOM與CSSOM組成渲染樹

DOM樹包含了HTML元素之間的關(guān)系信息，CSSOM樹則包含了這些元素的樣式信息。從根節(jié)點(diǎn)開始，瀏覽器會(huì)遍歷每一個(gè)可見節(jié)點(diǎn)，有些節(jié)點(diǎn)是隱藏的（通過CSS控制），不會(huì)出現(xiàn)在渲染結(jié)果中。對(duì)于每個(gè)可見節(jié)點(diǎn)，瀏覽器找到CSSOM中定義的相關(guān)規(guī)則進(jìn)行匹配，最終這些節(jié)點(diǎn)會(huì)帶著內(nèi)容和樣式出現(xiàn)在渲染樹中。

布局

接下來進(jìn)行內(nèi)容布局。內(nèi)容的實(shí)際尺寸和位置需要經(jīng)過計(jì)算才能渲染到頁面上，這個(gè)過程也叫重排（reflow）。HTML采用基于流的布局模型，也就是說大部分情況下，幾何位置是一次性計(jì)算出來的（內(nèi)容大小或位置發(fā)生變化，需要重新計(jì)算）。這個(gè)過程是從文檔根元素開始，遞歸完成的。

繪制

通過遍歷每個(gè)渲染器，并調(diào)用paint方法在屏幕上顯示內(nèi)容。繪制過程可以是全局的（繪制整個(gè)樹），也可以是增量的（渲染樹在屏幕上驗(yàn)證某個(gè)矩形區(qū)域），操作系統(tǒng)在這些特定節(jié)點(diǎn)上生成繪制事件，整個(gè)樹不受影響。繪制是一個(gè)漸進(jìn)的過程，其中一部分在被解析和渲染過后，而該過程將繼續(xù)處理其余部分。

JavaScript解析器（JS引擎）

JavaScript是一種腳本語言，可動(dòng)態(tài)更新Web內(nèi)容、控制多媒體和動(dòng)畫等，這些是通過瀏覽器的JS引擎完成的。DOM和CSSOM提供了JS接口，都可以通過JS修改，由于瀏覽器不確定某些JS會(huì)做什么，因此它會(huì)在遇到script標(biāo)簽后會(huì)立即暫停構(gòu)建DOM樹。

JS解析器在接收到服務(wù)器發(fā)送來的代碼后，會(huì)立即進(jìn)行解析，代碼被轉(zhuǎn)換成機(jī)器能理解的對(duì)象表示形式。保存了所有解析信息的對(duì)象叫做抽象語法樹（AST），這些對(duì)象又被解析器轉(zhuǎn)換成字節(jié)碼。這種編譯方式叫做（Just In Time，JITs），也就是Java Script從服務(wù)器下載后在客戶端實(shí)時(shí)編譯。解析器和編譯器是組合使用的，解析器立即處理源代碼，編譯器則生成機(jī)器碼，客戶端操作系統(tǒng)可直接運(yùn)行。

UI Back End用于繪制基礎(chǔ)控件，比如復(fù)選框和窗口等。底層使用操作系統(tǒng)的用戶界面方法，暴露通用的接口，跟平臺(tái)無關(guān)。

數(shù)據(jù)存儲(chǔ)層

這是持久化層，輔助瀏覽器保存一些數(shù)據(jù)（比如cookies，session storage，indexed DB，Web SQL和書簽以及用戶的偏好設(shè)置等）。HTML5規(guī)范提出了瀏覽器端的完整數(shù)據(jù)庫功能。

網(wǎng)絡(luò)層

這一層處理瀏覽器的各種網(wǎng)絡(luò)通信，瀏覽器使用各種通信協(xié)議獲取網(wǎng)絡(luò)資源，比如HTTP，HTTPs，F(xiàn)TP等。

瀏覽器用DNS解析URL，這些解析記錄緩存在瀏覽器、操作系統(tǒng)、路由器或者ISP中。如果請(qǐng)求的URL不在緩存中， ISP的DNS服務(wù)器首先發(fā)起DNS查詢，找到正確的IP地址后，瀏覽器使用特定的協(xié)議與服務(wù)器建立連接。瀏覽器向服務(wù)器發(fā)送SYN數(shù)據(jù)包，詢問服務(wù)器是否打開了TCP連接，服務(wù)器用SYN/ACK數(shù)據(jù)包響應(yīng)作為前面SYN的應(yīng)答，瀏覽器接收到應(yīng)答后，再向服務(wù)器發(fā)送ACK數(shù)據(jù)包。通過這樣的3次握手就建立了TCP連接，一旦建立了連接，就可以傳輸數(shù)據(jù)了。傳輸數(shù)據(jù)過程中必須遵守HTTP協(xié)議的相關(guān)要求，包括請(qǐng)求和響應(yīng)的規(guī)則等。

瀏覽器比較

如今市面上有各種不同的瀏覽器，盡管核心功能都是相同的，但是它們之間的區(qū)別也是多方面的。包括平臺(tái)（Linux，Windows，Mac，BSD以及其他Unix系統(tǒng)）、協(xié)議、用戶界面、HTML5支持情況、是否開源和所有權(quán)等。