JavaScript深刻淺出第5課：Chrome是如何成功的？

摘要： Chrome改變世界。javascript

前言

在上一篇博客中，我聊了一下JavaScript引擎V8的工做原理，順其天然，接下來應該來聊聊渲染引擎Blink或者Chrome瀏覽器的工做原理。可是，這2個坑之後再填。java

此次我重點聊聊產品，固然免不了涉及一些技術。react

幾乎全部JavaScript開發者天天都在使用Chrome，你們知道它是如何成爲瀏覽器霸主的嗎？程序員

Google爲何要作瀏覽器？

其實，Google的聯合創始人Larry Page和Sergey Brin早在2001年就想作瀏覽器，可是當時的CEO施密特一直反對，由於從頭開發一個瀏覽器的成本過高了，不是一個創業公司能夠承受的。所以，Google直到2006年，公司已經上市2年了，纔開始作瀏覽器，祕密開發了2年，Chrome才正式發佈。web

Google真正開始開發Chrome是2006年，當時IE的市場佔有率高達80%，Firefox大概是10%。自從擊敗Netscape以後，IE彷佛能夠高枕無憂了。若是那時候有人要作一個瀏覽器，大多數人都會質疑，還須要多個瀏覽器幹嗎？IE和Firefox又不是不能用。算法

可是，2006年時的Web早已經再也不是簡單的靜態頁面，Gmail、Youtube、Google Maps，Facebook這些複雜的Web應用已經出現一段時間了，傳統瀏覽器在架構、性能以及穩定性上已經逐漸再也不適用了，這時正是須要一款更增強大的瀏覽器來知足用戶與Web開發者的需求。chrome

Google所作的最重要的事情，就是對成千上萬的網頁進行排序，因此它存在的意義是基於網頁的。而一個更快、更好的瀏覽器，能夠促進Web技術的發展，網頁會愈來愈多，愈來愈好，用戶花在Web上的時間愈來愈多，這對Google是有益。所以，Google要作瀏覽器，不僅是想要一個搜索入口那麼簡單。編程

Google但願經過Chrome瀏覽器來促進Web技術的發展，從而讓本身受益，這也不是什麼祕密，Chrome團隊的人都是這麼說的，Google如今的CEO是Sundar Pichai，他當年發佈Chrome的時候是這樣說的：小程序

We hope to collaborate with the entire community to help drive the web forward.

這樣假大空的話當年大概沒幾我的相信，可是這不重要，重要的是Google真的作到了，Chrome確實推進了Web技術的發展。沒有Chrome的話，如今的Web技術大概確實得落後很多。

若是Google只是想要一個搜索入口，它能夠收購一個瀏覽器，或者基於開源瀏覽器套一個殼，作一下帳戶系統就夠了，再經過Google網站進行推廣。國內各個大廠的瀏覽器都是基於Chrome的開源版本Chromium實現的，某個瀏覽器甚至直接打包了Chrome的安裝包。

既然Google想作的事情是推進Web技術發展，若是沿用舊的思想和技術的話，顯然是作不到的。因而，他們設計了一個多進程的瀏覽器架構，從新寫了一個性能彪悍的JavaScript引擎V8，後來又基於Webkit作了一個新的渲染引擎Blink。

不妨這樣說，Google與國內的搜索引擎巨頭們的還差一個Chrome瀏覽器。後者看到的是搜索流量帶來的商業價值以及從新開發一個瀏覽器的巨大成本，而前者看到了Web技術發展對搜索引擎自己的長遠價值。

Chrome就必定能成功嗎？

Google終於決定作瀏覽器了，但這事能不能作成，其實也不必定。和每個大公司同樣，Google失敗的項目遠遠多於成功的項目，你們不妨看看Killed by Google裏面的列表。

Google確實有不少很是成功的產品，好比Android，Youtube，Google Maps, DeepMind，可是它們其實都是收購來的。Chrome算是Google爲數很少的真正從零開始打造出來的產品。

下面這張圖是Chrome發佈時的照片：

圖片來源：Niall Kennedy

照片中從左至右是Larry Page, Brian Rakowski, Sundar Pichai, Sergey Brin, Darin Fisher, Lars Bak和Ben Goodger，他們都是Chrome瀏覽器最關鍵人物，也都由於Chrome的成功而收益不菲。

Larry Page和Sergey Brin是Google的創始人，他們一直但願作瀏覽器；
Sundar Pichai當時是Google負責產品的副總裁，Chrome也在他的管理範圍之類，如今他是Google的CEO；
Brian Rakowski當時是Chrome的產品經理，如今是Google負責產品的副總裁；
Lars Bak是JavaScript引擎V8的負責人，曾長期從事編程語言的虛擬機開發工做；
Darin Fisher是Chrome最先期的開發者，以前是Firefox的工程師，如今是Google負責Chrome的副總裁；
Ben Goodger是Chrome最先期的開發者，以前是Firefox的工程師，如今的職級爲Distinguished Engineer，僅次於Google Fellow以及Senior Google Fellow；

照片中你們都挺開心的，祕密開發了2年的Chrome終於發佈了，可是他們能想到10年後Chrome能夠佔有接近70%的市場份額嗎？

下圖是2009年到2019年瀏覽器的市場份額變化，Chrome一路飆升，而一度壟斷市場的IE則恰好相反：

圖片來源：Visual Capitalist

不妨對比一下1994年到2008年的瀏覽器市場份額，IE經過免費捆綁Windows把Netscape整垮了，巔峯時期的市場佔有率高達96%：

圖片來源：Wired

瀏覽器一直是一個硝煙四起的戰場，所以瀏覽器市場份額的變化多少有點戲劇性。

Chrome爲何會成功？

Chrome爲何會這麼成功呢？Google創始人Larry Page是這樣說的：

Chrome has hundreds of millions of happy users and is growing fast thanks to its speed, simplicity and security.

Chrome很快，很簡單，也很安全，因此它成功了，這是Page的觀點。真的是這樣嗎？其實也差很少。不過還少了一點，stability，即穩定性。Chrome的產品哲學是一共是4個S：Speed, Security, Stability以及Simplicity。其實，這4個S適用於全部互聯網產品，要作到話也不是那麼容易。

說人話，Chrome究竟有哪些不同呢？

簡潔的用戶界面(Simplicity)
多進程架構(Stability, Speed, Security)
JavaScript引擎V8(Speed)
渲染引擎Blink(Speed)

用戶界面的Simplicity其實不難作到，如今不少瀏覽器和Chrome看起來也差很少，只是Chrome率先簡化了瀏覽器的界面。這相似於iPhone發佈以後，你們明白了一個簡單的道理，原來手機只須要一塊屏幕就夠了，不須要那麼多按鍵，後來全部智能手機基本上都長得同樣了...

多進程架構、V8引擎以及Blink引擎都是很是硬核的技術，不是通常開發者能夠作到的，就算是如今也不多有人或者公司去嘗試作這個，因此如今國內外不少瀏覽器都是基於Chromium實現的。我想你們內心都清楚，要想這3點上超越Chrome，可能性很是小。

Blink渲染引擎的優化對提升Web性能也相當重要，只是Chrome剛開始用的是Webkit，我會在之後的博客中詳細介紹Blink。

固然，Chrome所作的創新遠不僅這麼多，我列舉的4點是Chrome成功最關鍵的要素。

簡潔的用戶界面

Chrome已經發布10多年了，可是它的界面其實沒怎麼變過：後退圖標，前進圖標，刷新圖標，合併的地址欄與搜索框，書籤圖標，登錄圖標，設置圖標...Chrome的界面很是簡潔，沒有任何多餘的元素。

2009年的Chrome是這樣的：

圖片來源：Gmail in 30 seconds

2019年的Chrome是這樣的：

Chrome發佈時，IE8也差很少在同一時期發佈，可是它的界面就沒那麼簡潔了：

一般，用戶應該不會去點擊「頁面」、「安全」、「工具」等選項，其實它們徹底能夠隱藏起來。Chrome的不少選項都是隱藏在設置選項裏面，其實更加科學。

Chrome是第一個將地址欄與搜索框合併的瀏覽器，合併的框被稱爲Omnibox，用戶既能夠輸入地址，也能夠搜索關鍵字。當用戶輸入時，Chrome還會進行實時推薦用戶可能要訪問的網頁。

Chrome還把書籤欄給隱藏了，這對於重度書籤用戶(好比我)來講帶來一些不便，可是這也讓界面又簡潔了不少。不少瀏覽器的書籤欄不只沒有隱藏，還會添加不少莫名其妙的默認書籤，甚至不少軟件安裝時也會給瀏覽器添加一些書籤，而這些書籤其實不少用戶都不會訪問。

合併地址欄和搜索框，隱藏書籤欄，這樣作不僅是讓用戶界面更加簡潔，還能夠培養用戶的搜索習慣，讓用戶不在須要記住特定的網站。

Chrome與IE8的Tab位置是不同的，Chrome的Tab在上面，而IE8的Tab在下面，這個區別彷佛沒那麼重要，不過也沒那麼簡單。Tab是Chrome用戶界面最重要的元素，每個Tab使用獨立的進程，Tab能夠拖拽出來做爲獨立的窗口，至關於一個獨立的應用。

Chrome的設計哲學是"Content, not Chrome"，所以它們Tab置頂，把一切能夠省略的東西都去掉，好比搜索框、狀態欄、書籤欄以及各類設置的快捷方式，儘可能讓每個Tab看起來像一個獨立的應用：郵件、視頻、社交或者購物等，不要讓多餘的瀏覽器元素影響用戶體驗，讓用戶專一於Web應用自己，讓Web應用愈來愈重要，這不不正是Google的陽謀嗎？

Chrome的產品哲學與iPhone以及微信本質是同樣的，都是極簡主義，這個地球人都知道，可是沒有多少產品能夠真正作到。爲何呢？由於要作到極簡主義，須要深入思考用戶需求以及產品價值。

多進程架構

Chrome的每個Tab和插件，都使用獨立的進程。這樣能夠提升瀏覽器的性能、安全性以及穩定性：

充分利用多核CPU，不一樣的進程可使用不一樣的CPU核運行；
便於限制Tab與插件進程的權限，減小安全隱患；
當某一個Tab的頁面崩潰了，不會致使其餘Tab崩潰，整個瀏覽器還能夠正常使用；

多進程架構借鑑了現代操做系統的設計思想，瀏覽器再也不是一個簡單的應用，它是一個平臺，能夠用於獨立運行各類各樣的Web應用。

使用Chrome的任務管理器，能夠查看每個Tab和插件進程所使用的CPU、內存已經網絡。這樣能夠幫助Web開發者優化代碼，高效利用計算機資源。

既然多進程架構有這麼多好處，那爲何之前的瀏覽器採用單進程架構呢？由於IE、Firefox等瀏覽器誕生時，Web還很是簡單，大可能是靜態頁面，單進程就夠用了，並且當年也沒有什麼多核CPU。

從單進程架構切換到多進程架構是一個很是複雜的過程，Firefox從2009年到2017年花了整整8年時間才完成切換。從這一點來講，Firefox落後了Chrome接近10年。這倒不是由於Chrome的工程師特別厲害，而是由於Chrome從一開始就設計了多進程架構，沒有什麼技術債。

JavaScript引擎V8

Chrome的性能優異，很大程度上要歸功於他們的從新的開發的JavaScript引擎V8。V8引擎能夠將JS代碼編譯爲高效的彙編代碼，同時還要負責執行代碼、分配內存以及垃圾回收。

V8引擎的命名靈感來自超級性能車的V8引擎，勇於這樣命名確實須要一些實力，它性能確實一直在穩步提升，下面是使用Speedometer benchmark的測試結果：

圖片來源：v8.dev

JavaScript是動態的，且沒有類型，這會給V8引擎編譯JS代碼時帶來不少麻煩。不過V8引擎能夠記錄代碼第一次執行時的類型信息，當代碼第二次執行時，則能夠根據記錄的類型信息生成優化的彙編代碼。另外，V8引擎還會爲Object生成動態的hidden class，用來記錄Object的結構，以提升屬性的訪問速度。

V8引擎的垃圾回收算法也很是強大，能夠大幅減小內存使用。最近有人對比了一下3中不一樣類型的JS引擎JavaScriptCore、Hermes以及V8在React Native應用中的內存使用狀況，發現V8的內存使用量明顯低於其餘引擎，且很是平穩：

圖片來源：Bhaskar gyan vardhan

關於V8引擎以及垃圾回收算法的技術細節，你們能夠閱讀個人博客：

V8引擎不僅是讓Chrome變快，它也讓JavaScript變得更增強大，讓JavaScript生態系統變得異常繁榮。Node.js也是基於V8引擎的，由於有Node.js，纔有了數量龐大的NPM模塊，纔有了各類各樣的JavaScript開發框架和工具。

Chrome會成爲下一個IE嗎？

也許是樹大招風，最近批評Chrome的聲音愈來愈多了，有人甚至說Chrome會成爲下一個IE6。我的以爲這個有點危言聳聽。

Chrome從一開始就是開源的，"Talk is cheap, show me the code"，若是實在對Chrome有啥特別不爽的地方，其實能夠去改代碼，或者fork一個更好的版本。

Chrome從一直是尊重技術標準的，它在發佈的時候就經過了Acid測試，更重要的是，它一直在推進HTML五、CSS、ECMAScript、HTTPS、HTTP/二、WebAssembly、Service Workers、Source Map等Web相關技術標準的發展，你們能夠在各個標準提案中看到Google工程師的身影。

有人說Google工程師最大的問題就是喜歡提新的技術標準，可是有標準比沒有標準要好太多了，國內各個大廠小程序作了快3年了，至今連個標準都沒有，各玩各的，這樣作致使整個小程序行業一塊兒加班，一塊兒重複勞動。最嚴重的問題在於，沒有標準會制約小程序的進一步發展，你們沒法給用戶提供最好的產品。

開放繁榮的Web符合Google的長遠利益，由於Google是靠Web廣告賺錢的；可是Web對於Microsoft來講一直就沒有太大商業價值，由於Microsoft賣的是操做系統；按照吳軍老師的基因論，IE之因此失敗是Microsoft的基因決定的，而Google的基因決定了它必須把Chrome作好。

從目前的狀況來看，Chrome依然會保持簡潔的界面，性能也會一直提升，這樣的話，用戶和開發者也沒有多少動力去換瀏覽器。我已經用了7年Chrome了，將來還會繼續用下去，那你呢？

關於JS，我打算花1年時間寫一個系列的博客《JavaScript深刻淺出》，你們還有啥不太清楚的地方？不妨留言一下，我能夠研究一下，而後再與你們分享一下。歡迎添加個人我的微信(KiwenLau)，我是Fundebug的技術負責人，一個對JS又愛又恨的程序員。

參考

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。自從2016年雙十一正式上線，Fundebug累計處理了20億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對一、微脈、青團社等衆多品牌企業。歡迎你們免費試用！

版權聲明

轉載時請註明做者 Fundebug以及本文地址： blog.fundebug.com/2019/08/08/…