瀏覽器工做原理

1、瀏覽器種類

• IE （internet Explorer）瀏覽器
• Firefox 火狐瀏覽器
• Chrome 谷歌瀏覽器
• Safari 瀏覽器
• Opera 瀏覽器

談談幾種瀏覽器的內核

• 內核只是一個通俗的說法，其英文名稱爲「Layout engine」，翻譯過來就是「排版引擎」，也被稱爲「頁面渲染引擎」
• 它負責取得網頁的內容（HTML、XML、圖像等等）、整理信息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機
• 全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要排版引擎。
• 內核種類
  • Trident
    • 這是微軟開發的一種排版引擎。
    • 有時候，爲了方便也有不少人直接簡稱其爲IE內核
    • IE、Maxthon、TT、The World
  • Geckos
    • Gecko是套開放源代碼的、以C++編寫的網頁排版引擎。
    • FireFox
  • Presto
    • Presto是一個由Opera Software開發的瀏覽器排版引擎
    • Opera
  • Webkit
    • 蘋果公司本身的內核，也是蘋果的Safari瀏覽器使用的內核
    • Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎
    • Safari、Chrome

2、瀏覽器功能

• 瀏覽器功能：
  • 一、向服務器發出請求
  • 二、在瀏覽器窗口中展現您選擇的網絡資源
  • 這裏所說的資源通常是指HTML文檔，PDF、圖片、其餘的類型。
  • 資源的位置：由用戶使用 URI（統一資源標示符）指定。
• 瀏覽器解釋顯示規範：
  • 瀏覽器解釋並顯示 HTML 文件的方式是在 HTML 和 CSS 規範中指定的。
  • 這些規範由網絡標準化組織 W3C（萬維網聯盟）進行維護。
  • 萬惡之源：雖然制定了相應的規範，可是各瀏覽器都沒有徹底聽從這些規範，同時還在開發本身獨有的擴展程序，這給網絡開發人員帶來了嚴重的兼容性問題。
• 瀏覽器的界面用戶元素
  • 用來輸入 URI 的地址欄
  • 前進和後退按鈕
  • 書籤設置選項
  • 用於刷新和中止加載當前文檔的刷新和中止按鈕
  • 用於返回主頁的主頁按鈕
• 瀏覽器的用戶界面並無任何正式的規範，這是多年來的最佳實踐天然發展以及彼此之間相互模仿的結果。

3、瀏覽器構成

• 瀏覽器主要組件

  

  • 一、用戶界面-包括地址欄、前進/後退按鈕、書籤菜單等。除了瀏覽器主窗口顯示的您請求的頁面外，其餘顯示的各個部分都屬於用戶界面。

    

  • 二、瀏覽器引擎 - 在用戶界面和呈現引擎之間傳送指令。
  • 三、呈現引擎 - 負責顯示請求的內容。
    • 若是請求的內容是HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在屏幕上。
    • 默認狀況下，呈現引擎可顯示 HTML 和 XML 文檔與圖片。經過插件（或瀏覽器擴展程序），還能夠顯示其餘類型的內容；例如，使用 PDF 查看器插件就能顯示 PDF 文檔。
    • 兩種經常使用的呈現引擎：gecko webkit
    • gecko 火狐Firefox 這是 Mozilla 公司「自制」的呈現引擎。
    • WebKit 是一種開放源代碼呈現引擎，起初用於 Linux 平臺，隨後由 Apple 公司進行修改，從而支持蘋果機和 Windows。
    • 呈現引擎的基本流程

      

    • 這是一個漸進的過程。爲達到更好的用戶體驗，呈現引擎會力求儘快將內容顯示在屏幕上。它沒必要等到整個HTML文檔解析完畢以後，就會開始構建呈現樹和設置佈局。在不斷接收和處理來自網絡的其他內容的同時，呈現引擎會將部份內容解析並顯示出來
      • 解析 HTML 文檔，並將各標記逐個轉化成「內容樹」上的 DOM 節點
      • 呈現- 解析外部 CSS 文件以及樣式元素中的樣式數據、HTML 中這些帶有視覺指令的樣式信息將用於建立另外一個樹結構：呈現樹 。呈現樹包含多個帶有視覺屬性（如顏色和尺寸）的矩形。這些矩形的排列順序就是它們將在屏幕上顯示的順序。
      • 佈局-也就是爲每一個節點分配一個應出如今屏幕上的確切座標。
      • 繪製-呈現引擎會遍歷呈現樹，由用戶界面後端層將每一個節點繪製出來。在繪製階段，系統會遍歷呈現樹，並調用呈現器的「paint」方法，將呈現器的內容顯示在屏幕上。繪製工做是使用用戶界面基礎組件完成的。

  webkit 主流程

  • 呈現樹 它由「呈現對象」組成
  • 佈局 元素的放置
  • 附加 鏈接 DOM 節點和可視化信息從而建立呈現樹的過程

    

  Gecko 主流程

  • 框架樹 Gecko將視覺格式化元素組成的樹稱爲「框架樹」。每一個元素都是一個框架
  • 重排 元素的放置
  • Gecko 在 HTML 與 DOM 樹之間還有一個稱爲「內容槽」的層，用於生成 DOM 元素。

* 四、 網絡 - 用於網絡調用，好比HTTP請求。其接口與平臺無關，併爲全部平臺提供底層實現。 * 五、 用戶界面後端-用於繪製基本的窗口小部件，好比組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操做系統的用戶界面方法。 * 六、 JavaScript解釋器。用於解析和執行 JavaScript 代碼。 * 七、 數據存儲-這是持久層。瀏覽器須要在硬盤上保存各類數據，例如 Cookie。新的 HTML規範(HTML5)定義了「網絡數據庫」，這是一個完整（可是輕便）的瀏覽器內數據庫。

• 和大多數瀏覽器不一樣，Chrome瀏覽器的每一個標籤頁都分別對應一個呈現引擎實例。每一個標籤頁都是一個獨立的進程

4、呈現引擎的主流程步驟

解析

• 解析文檔是指將文檔轉化成爲有意義的結構，也就是可以讓代碼理解和使用的結構。
• 解析是一個迭代的過程。
• 解析獲得的結果一般是表明了文檔結構的節點樹，它稱做解析樹或者語法樹

• 能夠解析的格式都必須對應肯定的語法——這些語法由詞彙和語法規則構成。人類語言並不屬於這樣的語言，所以沒法用常規的解析技術進行解析。
• 解析過程分爲：詞法分析和語法分析
  • 詞法分析：將輸入內容分割成大量標記的過程。
    • 標記是語言中的詞彙，即構成內容的單位。
    • 標記在人類語言中，它至關於語言字典中的單詞。
  • 語法分析：是應用 語言的語法規則 的過程
• 解析器一般將解析工做分給如下兩個組件來處理：
  • 詞法分析器（有時也稱爲標記生成器），負責將輸入內容分解成一個個有效標記；詞法分析器知道如何將無關的字符（好比空格和換行符）分離出來
  • 解析器負責根據語言的語法規則分析文檔的結構，從而構建解析樹。
  • 解析器類型：
    • 自上而下解析器 ：從語法的高層結構出發，嘗試從中找到匹配的結構
    • 自下而上解析器 ：從低層規則出發，將輸入內容逐步轉化爲語法規則，直至知足高層規則。
• 原文檔=>詞法分析=>語法分析=>解析樹

  

編譯

• 源代碼=>（解析）=>解析樹=>（翻譯）=>機器代碼

解析器生成器

• WebKit 使用了兩種很是有名的解析器生成器：
  • Flex: 用於建立詞法分析器。Flex 的輸入是包含標記的正則表達式定義的文件
  • Bison: 用於建立解析。Bison 的輸入是採用 BNF 格式的語言語法規則。