瀏覽器毫無疑問是互聯(lián)網(wǎng)時代使用最廣泛的軟件，也是我們探索網(wǎng)絡世界的窗口填帽。本文將簡要介紹瀏覽器的組成和工作機制。 對于前端開發(fā)同學而言，唯有深入理解瀏覽器的工作機制才能編寫更加高效的代碼政模。
瀏覽器的主要組件
用戶界面:?包括地址欄，書簽等你可以看見和操作的部分蚂会，俗稱UI淋样。
瀏覽器引擎:?用來查詢及操作渲染引擎的接口。
渲染引擎:?用來顯示請求的內(nèi)容胁住，例如你訪問一個頁面趁猴，它負責解析服務器返回的html和css文本，并將解析后的結(jié)果顯示為我們看到的網(wǎng)頁彪见。比如目前廣泛使用的apple?safari?和?google?chrome的webkit渲染引擎(chrome后續(xù)的blink渲染引擎也是基于webkit的)儡司。
網(wǎng)絡:?用來完成網(wǎng)絡調(diào)用，例如http請求余指，它具有平臺無關的接口捕犬，可以在不同平臺上工作。
UI?后端:?用來繪制界面酵镜，具有不特定于某個平臺的通用接口碉碉，底層使用操作系統(tǒng)的用戶接口。
JS解釋器:?用來解釋執(zhí)行JS代碼笋婿，比如google?chrome?v8引擎誉裆，玩nodejs的同學不會陌生。
數(shù)據(jù)存儲:?屬于持久層缸濒，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)足丢。
各組成部分和依賴關系如下圖所示：
瀏覽器的功能
瀏覽器的主要功能是將用戶選擇的web資源呈現(xiàn)出來，它需要從服務器請求資源庇配，并將其顯示在瀏覽器窗口中斩跌，資源的格式通常是html，但也包括PDF捞慌、image及其他格式耀鸦。資源的位置用URI指定(Uniform?Resource?Identifier?統(tǒng)一資源標識符) 。
html和css規(guī)范中規(guī)定了瀏覽器解釋html文檔的方式，由W3C組織對這些規(guī)范進行維護袖订，W3C是負責制定web標準的組織氮帐。
對于前端開發(fā)者而言，瀏覽器還是開發(fā)調(diào)試web頁面和js腳本的利器洛姑。
網(wǎng)頁呈現(xiàn)流程
渲染引擎首先通過網(wǎng)絡獲得所請求文檔的內(nèi)容上沐，這些內(nèi)容通常是文本。
渲染引擎開始解析html楞艾，并將html標記解析為DOM樹参咙。接著，它解析外部css文件及文檔中style標簽中的樣式信息硫眯，這些樣式信息以及html中的可見性指令將被用來構建另一棵樹Render樹蕴侧。Render樹由一些包含有顏色和大小等屬性的矩形組成，它們將被按照正確的順序顯示到屏幕上两入。Render樹構建好了之后净宵，將會執(zhí)行布局過程，它將確定每個節(jié)點在屏幕上的確切坐標谆刨。
再下一步就是繪制塘娶，即遍歷Render樹，并使用UI后端層繪制每個節(jié)點痊夭。值得注意的是刁岸，這個過程是逐步完成的，為了更好的用戶體驗她我，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上虹曙，并不會等到所有的html都解析完成之后再去構建和布局Render樹。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容番舆，同時酝碳，可能還在通過網(wǎng)絡下載其余內(nèi)容。
渲染引擎是單線程的恨狈，除了網(wǎng)絡操作以外疏哗，幾乎所有的事情都在單一的線程中處理，在Firefox和Safari中禾怠，這是瀏覽器的主線程返奉，Chrome中這是tab的主線程。網(wǎng)絡操作由幾個并行線程執(zhí)行吗氏，并行連接的個數(shù)是受限的（通常是2－6個）芽偏。
文檔通過網(wǎng)絡請求獲取后的渲染流程如下：
通常前端性能優(yōu)化主要就是優(yōu)化渲染，比如我們常常聽說移動端首屏渲染弦讽，網(wǎng)站首頁打開時間等污尉，有興趣的同學可以深挖。
結(jié)語
當然隨著智能手機和移動互聯(lián)網(wǎng)的高速發(fā)展，網(wǎng)頁的呈現(xiàn)不單只發(fā)生在普通的瀏覽器中被碗，比如通過微信訂閱號看到這篇文章的某宪，這里微信通過嵌入瀏覽器渲染引擎?(基于webkit的qq瀏覽器引擎)?渲染和顯示訂閱號的web頁面。
本文作者：汪國超（點融黑幫）锐朴，點融網(wǎng)前端開發(fā),對新技術尤其是前端新技術特別有興趣缩抡，吃貨一枚， 喜歡旅游看美劇包颁。
