瀏覽器工做過程詳解（譯）（一）

寫在前面

這篇文章是一篇譯文，年代有點久，部份內容有過期，請讀者仔細閱讀，翻譯自「How browser work」，原文地址爲點擊這裏查看原文

簡介

web瀏覽器多是咱們使用最廣的軟件了。在這篇文章中我將會詳細介紹一下瀏覽器在背後到底是如何工做的。咱們將會知道，在你在地址欄鍵入「google.com」到瀏覽器呈現頁面的這段時間內，究竟發生了什麼。

咱們將會探討的瀏覽器

現在咱們經常使用的瀏覽器主要有5種：IE、Firefox、Safari、Chrome以及Opera。咱們將會以開源瀏覽器Firefox、Chrome和Safari（部分開源）爲例，據W3C瀏覽器相關統計，以上三種瀏覽器佔比大概有60%（2009 年 10月）。因而可知，現現在開源的瀏覽器已經佔據瀏覽器市場的大部分了。

瀏覽器主要功能

瀏覽器主要的功能是經過向服務器請求，來獲取你所想要的網絡資源，並將它渲染到瀏覽器窗口中。而資源類型一般是html文件，但也多是PDF，圖片或者是其餘類型的資源。資源地址一般是由用戶鍵入的URI(統一資源標識符)來決定的。更多內容在如下網絡部分會講到。

瀏覽器渲染解讀html文件是依據定義好的html結構以及css樣式。這些規則描述主要是由W3C組織來制定的。如今的html的版本是4，版本5正在規劃準備中。而css的版本是2，一樣的，css3也正在規劃。

不少年以來，各類瀏覽器只有部分是聽從標準的，同時各個瀏覽器廠商都發展了他們本身獨有的東西。這給web開發者帶來了不少兼容性問題。現在多數瀏覽器或多或少會聽從標準。

在用戶界面上，各個瀏覽器之間仍是有不少類似之處的。好比說：

• 地址欄用於鍵入URI

• 回退和前進按鈕

• 書籤選項

• 用於刷新和中止的按鈕

• 主頁按鈕
  使人詫異的是，沒有任何正式的規範指定用戶界面，這只是多年經驗和瀏覽器相互模仿造成的良好習慣。HTML5規範不定義瀏覽器必須具有的UI元素，但列出了一些常見元素。如地址欄、狀態欄、工具欄等。固然，像Firefox下載管理器這樣的功能，是獨有的。

更多相關內容咱們在用戶界面部分再介紹。

瀏覽器深層結構

1. 用戶界面－包括了地址欄、返回前進按鈕、書籤菜單等。在每個請求頁內，你均可以看到這些UI組件，除了主窗口。

2. 瀏覽器引擎－用來查詢和操做渲染引擎的接口

3. 渲染引擎－負責渲染請求的內容。好比，若果請求的資源是html文件，那麼渲染引擎負責解析html以及css，而後再把結果渲染到頁面。

4. 網絡鏈接－用於處理網絡請求，如http請求。它不依賴不一樣的平臺，這意味着它能夠在不一樣平臺工做。

5. UI後臺－用於渲染基礎部件，如多選框、窗口等。它暴露了一個不是特定平臺的通用接口，在底層調用了操做系統的用戶接口。

6. js引擎－用於解析javascript代碼

7. 數據存儲－這是一個持久層。瀏覽器須要在硬盤中存儲各式數據，好比cookie。HTML5定義了‘web database’這樣輕量級的web瀏覽器存儲技術。

值得注意的是，谷歌瀏覽器和大多數瀏覽器不一樣，每個選項卡都是渲染引擎的一個實例，都擁有獨立的進程。我將會對以上每一個組件都寫一個章節來說解。

組件之間的通訊

火狐和谷歌都發展了一個特殊的通訊結構，後面咱們將會單獨來說。

渲染引擎

說到渲染引擎的責任，好吧，所謂渲染，就是將請求到的內容展示在瀏覽器屏幕上。
默認狀況下，渲染引擎會將HTML和XMl文檔以及圖片展現出來。固然，經過一些插件（瀏覽器擴展），渲染引擎也可以展示其它類型的文檔。舉例來講，用PDF擴展，渲染引擎能夠展示PDF文檔。咱們會單獨拿一章篇幅來介紹瀏覽器插件和擴展。在這章裏，咱們會把重點放在最主要的狀況：渲染用CSS修飾的HTML和圖片。

渲染引擎

咱們所討論的幾款瀏覽器－火狐、谷歌、Safari都是基於兩種渲染引擎創建的。火狐使用的是Gecko－一種Mozilla自主研發的渲染引擎。Safari和谷歌都是使用Webkit渲染引擎。

Webkit是開源的，它一開始是做爲Linux平臺上的引擎，通過蘋果公司改良後支持了Mac和Windows平臺。詳情請參閱這裏

主要流程

渲染引擎將會先經過網絡獲取請求的文檔內容，這不操做一般以8k分塊的方式完成。
如下是渲染引擎拿到數據後主要的工做流程：

解析HTML並構建DOM樹 => 構建render樹 => render樹佈局 => render樹繪製

渲染引擎開始解析HTML文檔，並把標籤轉化成內容樹中的DOM節點。同時它也開始解析樣式數據，外鏈的css文件以及style標籤內的樣式。全部這些樣式數據以及HTML中的可見性指令都是用來建立另外一棵樹－－render 樹。

render樹由一些包含顏色、尺寸等視覺屬性的小方塊組成。這些小方塊將會按照正確的順序顯示在屏幕上。