一、我們為什么要了解瀏覽器？

1. 對于前端開發者

1.瀏覽器是用戶體驗的第一線。我們需要了解瀏覽器的工作原理，才能有效地設計和實現用戶界面，確保良好的用戶體驗。

2.好的產品需要考慮瀏覽器兼容性。我們需要了解這些差異，以確保網站或應用在不同的瀏覽器中都能正常工作，因為不同的瀏覽器對CSS、JavaScript等的支持程度和實現細節可能有所不同。

3.追求良好的性能需要我們了解瀏覽器的渲染機制、JavaScript引擎的工作原理，因為他們直接影響到頁面的加載速度和運行效率。

4.對用戶信息的安全性的考慮需要我們關注瀏覽器。我們需要了解瀏覽器的安全特性，如同源策略、內容安全策略等，才能更好地保護用戶數據不受XSS、CSRF等攻擊。

5.研發過程中需要使用調試工具，瀏覽器提供的開發者工具，可以幫助我們調試代碼、分析性能、檢查網絡請求等。

2. 對于后端開發者

1.在進行接口設計時，后端開發者需要設計API供前端調用，了解瀏覽器的工作原理有助于設計更高效、更安全的接口。

2.在前后端分離的架構中，后端提供的是服務端API，前端通過瀏覽器調用這些API。后端開發者需要了解瀏覽器的HTTP請求方式、跨域問題等，以確保API的正確實現和調用。

3.在性能監控過程中，后端開發者可能需要關注由于前端代碼不優化導致的服務器負載問題，如過多的HTTP請求、大量的數據傳輸等，這需要一定的瀏覽器知識來共同解決問題。

4.對于追求全棧開發能力的后端開發者，了解瀏覽器相關知識是必不可少的，這有助于后端更好地理解整個系統的工作流程，提高跨領域的協作能力。

二、瀏覽器發展概述

1. 宏觀發展

?

?

?

1. 瀏覽器降生

1990 年，英國計算機工程師蒂姆·伯納斯·李（Tim Berners-Lee）在瑞士的歐洲核子研究組織（CERN）工作時，開發出首個 Web 服務器與圖形化 Web 瀏覽器。他將這個進入互聯網世界的新窗口，稱為“WorldWideWeb”（即“萬維網”）。

一年后，伯納斯·李（Berners-Lee）委托 CERN 的數學系學生尼古拉·佩洛（Nicola Pellow）編寫了“命令行模式瀏覽器”，這是一款可在簡易計算機終端中使用的瀏覽器。

2. 瀏覽器涿鹿中原

1.1993年Mosaic瀏覽器的發布標志著圖形界面Web瀏覽器的誕生。它是由伊利諾伊大學厄巴納-香檳分校的國家超級計算應用中心（NCSA）開發的。

2.1994年Mosaic的一些原開發者創立了Netscape公司，并推出了Netscape Navigator，它迅速成為最受歡迎的瀏覽器。

3.1995年微軟推出了Internet Explorer（IE），并將其與Windows操作系統捆綁銷售，這一策略極大地推動了IE的市場份額。

4.1995-2001年這段時間，Netscape Navigator和Internet Explorer之間的競爭非常激烈。最終，IE憑借與Windows的捆綁優勢贏得了這場戰爭。

5.2003年蘋果公司推出了自家的瀏覽器Safari。

6.2004年Mozilla Foundation發布了Firefox瀏覽器。它是從Netscape的源代碼發展而來的，因其開源性質、安全性和擴展性受到用戶喜愛。

7.2008年谷歌發布了Chrome瀏覽器，以其速度、簡潔和創新的多進程架構迅速獲得了市場份額。

8.2004-2010年隨著Firefox和Chrome的崛起，瀏覽器市場再次進入競爭激烈的階段。IE的市場份額開始下滑，Chrome和Firefox成為主要的競爭對手。

9.2014年HTML5標準最終確定，推動了Web技術的進一步發展，各大瀏覽器廠商都開始支持這一標準。

10.2015年微軟發布了新的瀏覽器Edge，以取代老舊的IE瀏覽器。Edge最初使用了自家的EdgeHTML渲染引擎，后來轉而使用Chromium的Blink引擎。

3. 小結一下

瀏覽器的發展是一個持續的過程，廠商之間的競爭也在推動著技術的進步。隨著互聯網技術的不斷演進，我們可以預期瀏覽器將繼續在速度、安全性、用戶體驗和功能性上進行創新；隨著智能手機和平板電腦的普及，移動瀏覽器的重要性日益增加，Safari在iOS設備上占據主導地位，而Chrome在Android設備上成為主流。

2. 微觀發展

1. 單進程架構

顧名思義，單進程瀏覽器是指瀏覽器的所有功能模塊都是運行在同一個進程里，這些模塊包含了網絡、插件、JavaScript 運行環境、渲染引擎和頁面等。其實早在 2007 年之前，市面上瀏覽器都是單進程的。單進程瀏覽器的架構如下圖所示：

?

?

?

如此多的功能模塊運行在一個進程里，是導致單進程瀏覽器不穩定、不流暢和不安全的一個主要因素。原因如下：

（1）不穩定

早期瀏覽器需要借助于插件來實現諸如 Web 視頻、Web 游戲等各種強大的功能，但是插件是最容易出問題的模塊，并且還運行在瀏覽器進程之中，所以一個插件的意外崩潰會引起整個瀏覽器的崩潰。除了插件之外，渲染引擎模塊也是不穩定的，通常一些復雜的 JavaScript 代碼就有可能引起渲染引擎模塊的崩潰。和插件一樣，渲染引擎的崩潰也會導致整個瀏覽器的崩潰。

（2）不流暢

從上面的“單進程瀏覽器架構示意圖”可以看出，所有頁面的渲染模塊、JavaScript 執行環境以及插件都是運行在同一個線程中的，這就意味著同一時刻只能有一個模塊可以執行。

?

function test() {
    while(true) {
        console.log('test')
    }
}

如果讓這個腳本運行在一個單進程瀏覽器的頁面里,它會獨占整個線程,導致其他運行在該線程中的模塊就沒有機會被執行。因為瀏覽器中所有的頁面都運行在該線程中，所以這些頁面都沒有機會去執行任務，這樣就會導致整個瀏覽器失去響應，變卡頓。

（3）不安全

插件可以使用 C/C++ 等代碼編寫，通過插件可以獲取到操作系統的任意資源，當你在頁面運行一個插件時也就意味著這個插件能完全操作你的電腦。如果是個惡意插件，那么它就可以釋放病毒、竊取你的賬號密碼，引發安全性問題。

頁面腳本，它可以通過瀏覽器的漏洞來獲取系統權限，這些腳本獲取系統權限之后也可以對你的電腦做一些惡意的事情，同樣也會引發安全問題。

2. 多進程架構

（1）2008 年 Chrome 發布時的進程架構

?

?

?

（2）現在的多進程架構

?

?

?

?

1. 瀏覽器進程。主要負責界面顯示、用戶交互、子進程管理，同時提供存儲等功能。

2. 渲染進程。核心任務是將 HTML、CSS 和 JavaScript 轉換為用戶可以與之交互的網頁，排版引擎 Blink 和 JavaScript 引擎 V8 都是運行在該進程中，默認情況下，Chrome 會為每個 Tab 標簽創建一個渲染進程。出于安全考慮，渲染進程都是運行在沙箱模式下。

3. GPU 進程。其實，Chrome 剛開始發布的時候是沒有 GPU 進程的。而 GPU 的使用初衷是為了實現 3D CSS 的效果，只是隨后網頁、Chrome 的 UI 界面都選擇采用 GPU 來繪制，這使得 GPU 成為瀏覽器普遍的需求。最后，Chrome 在其多進程架構上也引入了 GPU 進程。

4. 網絡進程。主要負責頁面的網絡資源加載，之前是作為一個模塊運行在瀏覽器進程里面的，直至最近才獨立出來，成為一個單獨的進程。

5. 插件進程。主要是負責插件的運行，因插件易崩潰，所以需要通過插件進程來隔離，以保證插件進程崩潰不會對瀏覽器和頁面造成影響。

三、瀏覽器核心部件

1. 瀏覽器界面介紹

?

?

?

1.用戶界面主要是瀏覽器除了網頁顯示范圍以外的部分，包括地址欄、書簽、前進、后退按鈕、歷史記錄等用戶可操作的部分

2.瀏覽器引擎是用于在用戶界面和渲染引擎之間傳送指令或者在客戶端本地緩存中讀寫數據，它是各個部分之間相互通信的核心

3.渲染引擎主要是負責解析DOM和CSS規則，瀏覽器內核主要指的就是渲染引擎和JavaScript引擎

4.網絡模塊是負責發送網絡請求和下載網絡資源

5.JavaScript引擎用于解釋和執行JavaScript代碼，如V8

6.UI后端用于繪制基本的瀏覽器控件

7.數據持久化存儲是通過瀏覽器引擎提供的API進行調用

2. 目前瀏覽器的使用的渲染引擎和解釋器總結

3. 瀏覽器的解釋器

1. Rhino，由Mozilla基金會管理，開放源代碼，完全以Java編寫。

2. SpiderMonkey，第一款JavaScript引擎，早期用于Netscape Navigator，現時用于Mozilla Firefox。

3. JavaSV8，開放源代碼，由Google丹麥開發，是Google Chrome的一部分。

4. criptCore，開放源代碼，用于Safari。

5. Chakra (JScript引擎)，用于Internet Explorer11。

6. Chakra (JavaScript引擎)，用于Microsoft Edge。

7. KJS，KDE的ECMAScript／JavaScript引擎，最初由哈里·波頓開發，用于KDE項目的Konqueror網頁瀏覽器中。

四、各家瀏覽器目前的市場占比

1. 全球市場占有率

?

?

?

2. 中國市場占有率排名

?

?

?

?

五、整體總結一下

本篇文章主要介紹一下作為研發了解瀏覽器的必要性， 以及瀏覽器的基本情況和整體的發展。 在考慮產品定位時（開發出一款什么樣的目標產品），我們需要對瀏覽器有一定的了解，整篇文章對研發和產品皆有一定的參考意義。

?

本文主要參考《瀏覽器工作原理與實踐》

如果各位看官喜歡，留下你的的評論，留下你的贊

審核編輯 黃宇