浏覽器發展史和它的多程序架構

浏覽器是每天陪伴我們時間最長的軟體之一，特别是前端開發工程師, 對于這位每天陪伴着我們的朋友，我們有必要去了深入地解一下它。但是浏覽器的工作原理涉及的内容非常多，這篇文章就先從它的發展曆程和多程序架構入手，從宏觀視角去了解浏覽器。

浏覽器發展曆史

按照時間順序簡單羅列浏覽器從1991年到2008年之間的發展：

• 1991年：Berners-Lee建立了第一代網絡浏覽器WorldWideWeb , 能顯示文字和圖檔。

• 1993年: Mosaic問世，它是第一個獲得普遍使用并且能顯示文字和圖檔的浏覽器。
• 1994年：網景浏覽器釋出，隻能顯示靜态HTML，沒有JS和CSS，同年還出現了Opera 。
• 1995年：微軟釋出了IE1.0，IE2.0 ，就是我們熟悉的，在windows電腦上自帶的浏覽器。1996年：微軟将IE3.0內建在windows作業系統中。內建浏覽器在系統中是出于和網景浏覽器的競争，當時網景的市場佔有率達到86％，微軟的IE浏覽器內建在Windows系統後到1999年，它占據浏覽器市場的99%。
• 2003年：蘋果釋出了Safari浏覽器，同樣是內建在蘋果的電腦系統中，并在2005年将其核心webkit開源。
• 2004年：Firefox1.0釋出

• 2008年：谷歌以WebKit作為核心，建立了一個新的項目Chromium，在該項目的基礎上釋出了自己的浏覽器産品Chrome ，Chrome到目前為止，占據着浏覽器市場60％以上的市場佔有率。

世界上目前使用率最高的pc浏覽器是Chrome，據statcounter的資料顯示, Chrome在全世界的浏覽器市場占比達68.58%, 一騎絕塵，是第2名的Safari的7倍多，IE的市場佔有率已經掉到了1.37%，排名第六。Chrome、微軟的Edge和國内大部分浏覽器都是基于谷歌的Chromium項目開發的，是以接下來要講到的多程序架構将以Chrome為例。

2013年是chrome釋出後的第5年，其世界市場佔有率排名已經達到第一，本文第二部分說到的多程序架構就是chrome最先應用的，我們來看下多程序架構有什麼優勢。

2009年-01月-2021年07月pc浏覽器市場佔有率變化（資料來源于statcounter）

多程序浏覽器架構

在了解浏覽器多程序架構前，首先要了解程序和線程的概念以及它們的一些特點。

程序和線程

• 程序是一個應用的執行程式。也就是說，在我們打開一個應用的時候作業系統就會建立相應的程序。當我們打開浏覽器，作業系統會就建立浏覽器程序，打開微信會建立微信程序，其它應用也一樣。

• 程序有以下三個特點：
  • 程序能讓作業系統啟動另外的程序來執行不同的任務
  • 程序之間互相隔離：作業系統會為不同的程序配置設定不同的記憶體塊，這樣可以避免程序中的資料寫入到另一個程序中。如果程序之間需要通信，則需要通過IPC(Inter Process Communication程序間通信)。
  • 結束程序後，浏覽器會回收相應的記憶體資源。把應用關掉後，該應用的程序也會結束運作，随後作業系統會回收程序運作時占用的記憶體資源，等待配置設定給其它程序。
• 線程: 線程是程序内部用來執行任務的結構，一個程序可以使用啟動多個線程來執行任務。

• 線程也有一些特點：
  • 線程共享程序内的資料
  • 同一程序内的一個線程運作出錯就會引起整個程序崩潰

單程序浏覽器

單程序浏覽器的所有功能子產品都運作在同一個程序裡，如下圖所示：

2007年前的浏覽器都是單程序的，由于早期的浏覽器要展示的網頁内容比較簡單，隻是展示圖檔和文字等，很少互動的功能，是以采用單程序架構能更節省記憶體。但是随着技術的進步，網頁不僅要展示文字圖檔，還要展示各種複雜的動畫效果，使用JavaScript互動也越來越多。所有的功能子產品都在一個程序中運作，會導緻浏覽器不穩定、不流暢和不安全。

• 不穩定：由于程序中任何一個線程執行出錯都會導緻整個程序崩潰，插件和渲染引擎都很容易出錯，一旦頁面線程執行出錯，将導緻整個浏覽器程序崩潰。
• 不流暢：JavaScript運作環境和頁面渲染都運作在同一個線程中，如果出現複雜的JS代碼或者死循環，JavaScript運作環境将一直獨占頁面線程，所有頁面都沒機會執行任務，浏覽器會變得卡頓無響應。

• 不安全：線程除了共享程序中的資料還共享權限，也就是說如果浏覽器程序擁有作業系統的讀寫權限，一些惡意插件就可以往計算機寫入病毒，讀取計算機上的賬号密碼。

早期多程序架構

在chrome早期的多程序架構中，頁面和插件都運作在單獨的程序中。上圖中的層疊矩形表示多個程序，多個插件可以運作在多個插件程序中，浏覽器在記憶體資源充足的時候，會為每一個浏覽器tab啟動一個程序。浏覽器主程序負責控制浏覽器的使用者界面，包括位址欄、前進後退按鈕和書簽，同時還負責網絡請求、檔案通路和管理程序之間的通信等。多程序架構可以解決單程序浏覽器的不穩定、不流暢和不安全問題。

• 解決不穩定問題：因為程序是互相隔離的，是以即使頁面或者插件崩潰了也不會影響到其它頁面，也不會導緻整個浏覽器崩潰。
• 解決不流暢的問題：JavaScript運作在獨立的渲染程序中，即使該渲染程序崩潰也不會影響到其它頁面和浏覽器主程序。運作死循環代碼時隻有目前頁面會出現卡頓。

• 解決安全問題：渲染程序和插件程序在沙箱裡面運作，通過限制程序的權限來保證系統安全。

後來的多程序架構

提出多程序架構後谷歌不斷地進行優化，後來将網絡子產品從浏覽器主程序中獨立出來，添加GPU程序用于繪制Chrome的UI界面。雖然多程序架構能提高浏覽器的穩定性、流暢性和安全性，但同時又會帶來記憶體資源占用過多的問題，因為程序包含重複的功能子產品，比如每個渲染程序都會包含JS運作環境。如下圖所示每個浏覽器tab的渲染程序都要包含JS運作環境，當打開的頁面很多時，将占用大量的記憶體資源。

面向服務的架構

為了解決浏覽器占用過多系統資源的問題以及進一步優化多程序架構，在 2016 年，Chrome 官方團隊使用“面向服務的架構”（ServicesOriented Architecture，簡稱SOA）的思想設計了新的 Chrome 架構。

新架構将原來各個功能子產品重構成獨立的服務，每個服務都可以在獨立的程序中運作，通路服務必須使用定義好的接口。目前 Chrome 正處在老的架構向服務化架構過渡階段。新架構靈活具有彈性，在記憶體資源充足的裝置 上，基礎服務将運作在獨立的程序中。在記憶體資源不足時，多個基礎服務将合并到浏覽器主程序執行，如下圖所示。

總結

用一句話總結本文：長江後浪推前浪，一代新人換舊人。這句話的意思是事物是發展的，新事物推動着舊事物發展，新事物将取代舊事物。浏覽器的發展也是如此，從1991年至今30年間，市場上的主流浏覽器不斷發生變化，從早期受人們歡迎的網景到IE, 再到後來的FireFox和Safari, 最後是現在的Chrome。浏覽器技術也在不斷進步，從早期隻能顯示文字和圖檔的靜态頁面到現在能顯示各種媒體的動态頁面。從以前的單程序架構到現在穩定流暢安全的多程序架構。在Chrome應用了多程序架構後，IE和FireFox都實作了自己的多程序架構。

參考

https://time.geekbang.org/column/article/113513

https://www.bilibili.com/read/cv7962757

Chrome Service Model

Multi-process Architecture

Inside look at modern web browser (part 1)

Process Models