瀏覽器工做原理理解

時間 2019-11-19

原文原文鏈接

瀏覽器是咱們前端開發者工做的平臺，是咱們最長用的軟件，是咱們必需要了解的知識面，作個學習記錄。css

如今人都離不開網絡，在網上咱們能幹不少事情，用途最多的就是瀏覽器，它是一扇窗戶，打開這扇窗戶能夠看到大千世界的變化，是人類獲取信息重要的軟件工具之一。對於單純的使用者只知道怎麼使用瀏覽器去上網衝浪，而對於前端開發者須要瞭解這個瀏覽器是怎麼讓咱們能夠自由的在網絡世界遨遊，它是怎麼實現大千世界信息的展現的?分析開始。。。html

什麼是瀏覽器？

按專業的描述: 是指能夠顯示網頁服務器或者文件系統的HTML文件內容，並讓用戶與這些文件交互的一種軟件。它用來顯示在萬維網和局域網等內的文字、圖像及其餘信息。前端

瀏覽器種類：

按照瀏覽器的內核種類分類，web

Trident內核：微軟IE（坑貨）,MaxThon,TT,The World,360,搜狗瀏覽器等，這種瀏覽器內核是IE瀏覽器用的內核，後來被其餘瀏覽器廠商拿去延用，因2005年與W3C組織所制定的標準發生了脫節，致使對網頁新元素兼容不是太好，其自身內核也存在bug。windows

Gecko內核: Netscape6及以上版本，Firefox,MozillaSuite/SeaMonkey等，是網景早期自助研發的瀏覽器內核，這個內核的優勢就是功能強大、豐富，能夠支持不少複雜網頁效果和瀏覽器擴展接口，可是要消耗不少的資源，好比內存。後端

Presto內核：Opera7及以上,Presto內核被稱爲公認的瀏覽網頁速度最快的內核,優勢：在處理JS腳本等腳本語言時，會比其餘的內核快3倍左右。缺點：爲了達到很快的速度而丟掉了一部分網頁兼容性。瀏覽器

Webkit內核：Safari,Chrome等，優勢：網頁瀏覽速度較快，雖然不及 Presto 可是也勝於 Gecko 和 Trident。缺點：對於頁面容錯性較差，會使一些編寫不標準的網頁沒法正確顯。緩存

它們瓜分着當今社會瀏覽器使用的市場份額。服務器

瀏覽器主要構成：

1. 用戶界面－包括地址欄、後退/前進按鈕、書籤目錄等，也就是你所看到的除了用來顯示你所請求頁面的主窗口以外的其餘部分cookie

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

3. 渲染引擎－用來顯示請求的內容，例如，若是請求內容爲html，它負責解析html及css，並將解析後的結果顯示出來

4. 網絡－用來完成網絡調用，例如http請求，它具備平臺無關的接口，能夠在不一樣平臺上工做

5. UI 後端－用來繪製相似組合選擇框及對話框等基本組件，具備不特定於某個平臺的通用接口，底層使用操做系統的用戶接口

6. JS解釋器－用來解釋執行JS代碼

7. 數據存儲－屬於持久層，瀏覽器須要在硬盤中保存相似cookie的各類數據，HTML5定義了web database技術，這是一種輕量級完整的客戶端存儲技術

這張圖大致上說了一下瀏覽器內部工做流程，不是所有瀏覽器都是這樣的工做形態出現，有的流程走的路線不同的。

從用戶界面開始細說整個瀏覽器的工做流程，首先用戶發起URL請求，這是開始瀏覽器工做流的第一步。

瀏覽器對url及編碼解析：

大致流程說明以下：

1.瀏覽器向DNS服務器發送查找的URL輸入URL對應的IP地址

2.DNS服務器返回網站的IP地址

3.瀏覽器根據IP地址與WEB服務器在的80端口上創建TCP鏈接

4.瀏覽器獲取請求的頁面HTML代碼

5.瀏覽器在窗體渲染HTML

在這過程當中再深刻看下DNS查找IP操做：

DNS查找過程：

1.瀏覽器緩存：瀏覽器會緩存DNS記錄一段時間，但操做系統沒有告訴瀏覽器存儲DNS的時間，這樣不一樣的瀏覽存儲緩存時間不固定（2分鐘--30分鐘不固定）

2.系統緩存：若是在瀏覽器緩存沒有找到須要的記錄時，則瀏覽器會作一個系統調用（windows裏是用gethostbyname）。這樣就能夠得到系統中的緩存

3.路由緩存：瀏覽器向DNS服務器請求路由器，它通常會有本身的DNS緩存

4.ISP DNS緩存：接下來要check的就是ISP緩存DNS的服務器。在這通常都能找到相應的緩存記錄

5.遞歸搜索：你的ISP的DNS服務器從跟域名服務器開始進行遞歸搜索，從.com頂級域名到facebook域名服務器，通常DNS服務器的緩存中會有.com域名服務器中的域名，因此到頂級服務器的匹配過程不是那麼必要了

URL編碼解析:

若是url路徑中帶有中文，這個時候就能看出瀏覽器對url的編碼設置了，

URL例子：http://106.kuailingmin.sinaapp.com/蒯靈敏

由於IE會直接發送GBK編碼的參數，在後臺須要另外處理，而Firefox則以頁面編碼作Base64轉義,URL例子中的中文會變成http://106.kuailingmin.sinaapp.com/%E8%92%AF%E7%81%B5%E6%95%8F

上面大致這麼多，接下來DNS返回了IP地址的響應，這個時候會把頁面中的元素都返回過來，瀏覽器要去接受這些數據，在這個過程當中就會觸發瀏覽器排版引擎的工做，分析下何時瀏覽器排版引擎？

什麼是排版引擎：

網頁的排版引擎稱之爲渲染引擎，主要負責獲取網頁的內容（HTML,圖像,XML等等），整理信息（加入CSS文件），以及計算網頁的顯示方式而後輸出到顯示器，或者打印機設備，全部的網頁瀏覽器，電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要排版引擎。

這個是個重要的工做機制，目前幾個大瀏覽器廠商根據本身需求，研發本身的排版引擎，有些瀏覽器廠商則直接引擎這幾大排版引擎，（省事，省時，省力，省錢）。

排版引擎分類：

1.IE派: IE永遠不會用別人的東西，因此在瀏覽器任何環節都喜歡自主研發，目前是最流行的排版引擎，(世界之窗瀏覽器，Avant,騰訊TT,Netscape 8,NetCaptor,GreenBrowser等...)

Trident（圖形接口的排版引擎）

又稱之爲MSHTML,是IE瀏覽器的排版引擎，簡單瞭解下發展史：初版本誕生於1997年10月，以後不斷的加入新技術，到IE7版的時候，微軟對Trident排版引擎作了重大的變更，除了加入新技術以外，還對網頁標準支持。其設計成一個軟件組件形式

Gecko排版引擎：

流行程度僅次於Trident,d誕生於1998年初，Mozilla計劃開始執行。這個新的排版引擎名爲Raptor，以開發源碼的方式發放於互聯網上。後來，由於商標問題，Raptor改外爲NGLayout（即next generation layout之意）。而最後NGLayout就被網景從新命名爲Gecko。

Gecko兼容的標準:

             * HTML 4.01
   * XML 1.0
   * XHTML 1.1
   * MathML
   * CSS Level 1（支援部份CSS 2和3）
             * DOM Level 1和2（支援部份DOM 3）
             * RDF
   * JavaScript 1.7
   * E4X
       * SVG（支援部份SVG 1.1）

KHTML排版引擎：

該引擎是C++編寫的，並以LGPL受權，支援大多數網頁瀏覽標準,此優勢擁有速度快捷的優勢

引擎兼容標準：

* HTML 4.01
* CSS 1
      * CSS 2.1 （paged media除外）
      * CSS 3 選擇符（selector）及部分其餘功能
      * PNG, MNG, JPEG, GIF 圖形格式
* DOM 1, 2 及部分的 DOM 3
      * ECMA-262/JavaScript 1.5
* 部分 SVG

還有不少排版引擎好比說（混合排版引擎，Blink排版引擎,純文字排版引擎）,主要用於在PC端，手機端，瀏覽器排版引擎就總結這幾類，大致知道有這些的概念，而後就是HTML怎麼經過排版引擎解析的？

首先有經驗的前端開發都知道瀏覽器解析HTML文檔都是從第一行開始一行一行往下解析的，在這個過程當中，再深刻的研究,hmtl不能被通常的自頂向下或自底向上的解析器所解析，也不能使用正則解析技術，瀏覽器有專門的HTML解析器