摘要:所做的最重要的事情,就是對成千上萬的網頁進行排序,所以它存在的意義是基于網頁的。確實有很多非常成功的產品,比如,,,但是它們其實都是收購來的。為什么呢因為要做到極簡主義,需要深刻思考用戶需求以及產品價值。
摘要: Chrome改變世界。
《JavaScript深入淺出》系列:
JavaScript深入淺出第1課:箭頭函數中的this究竟是什么鬼?
JavaScript深入淺出第2課:函數是一等公民是什么意思呢?
JavaScript深入淺出第3課:什么是垃圾回收算法?
JavaScript深入淺出第4課:V8引擎是如何工作的?
JavaScript深入淺出第5課:Chrome是如何成功的?
前言在上一篇博客中,我聊了一下JavaScript引擎V8的工作原理,順其自然,接下來應該來聊聊渲染引擎Blink或者Chrome瀏覽器的工作原理。但是,這2個坑以后再填。
這次我重點聊聊產品,當然免不了涉及一些技術。
幾乎所有JavaScript開發者每天都在使用Chrome,大家知道它是如何成為瀏覽器霸主的嗎?
Google為什么要做瀏覽器?其實,Google的聯合創始人Larry Page和Sergey Brin早在2001年就想做瀏覽器,但是當時的CEO施密特一直反對,因為從頭開發一個瀏覽器的成本太高了,不是一個創業公司可以承受的。因此,Google直到2006年,公司已經上市2年了,才開始做瀏覽器,秘密開發了2年,Chrome才正式發布。
Google真正開始開發Chrome是2006年,當時IE的市場占有率高達80%,Firefox大概是10%。自從擊敗Netscape之后,IE似乎可以高枕無憂了。如果那時候有人要做一個瀏覽器,大多數人都會質疑,還需要多個瀏覽器干嘛?IE和Firefox又不是不能用。
但是,2006年時的Web早已經不再是簡單的靜態頁面,Gmail、Youtube、Google Maps,Facebook這些復雜的Web應用已經出現一段時間了,傳統瀏覽器在架構、性能以及穩定性上已經逐漸不再適用了,這時正是需要一款更加強大的瀏覽器來滿足用戶與Web開發者的需求。
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引擎V8Chrome的性能優異,很大程度上要歸功于他們的重新的開發的JavaScript引擎V8。V8引擎可以將JS代碼編譯為高效的匯編代碼,同時還要負責執行代碼、分配內存以及垃圾回收。
V8引擎的命名靈感來自超級性能車的V8引擎,敢于這樣命名確實需要一些實力,它性能確實一直在穩步提高,下面是使用Speedometer benchmark的測試結果:
圖片來源:https://v8.dev
JavaScript是動態的,且沒有類型,這會給V8引擎編譯JS代碼時帶來很多麻煩。不過V8引擎可以記錄代碼第一次執行時的類型信息,當代碼第二次執行時,則可以根據記錄的類型信息生成優化的匯編代碼。另外,V8引擎還會為Object生成動態的hidden class,用來記錄Object的結構,以提高屬性的訪問速度。
V8引擎的垃圾回收算法也非常強大,可以大幅減少內存使用。最近有人對比了一下3中不同類型的JS引擎JavaScriptCore、Hermes以及V8在React Native應用中的內存使用情況,發現V8的內存使用量明顯低于其他引擎,且非常平穩:
圖片來源:Bhaskar gyan vardhan
關于V8引擎以及垃圾回收算法的技術細節,大家可以閱讀我的博客:
JavaScript深入淺出第4課:V8引擎是如何工作的?
JavaScript深入淺出第3課:什么是垃圾回收算法?
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測試,更重要的是,它一直在推動HTML5、CSS、ECMAScript、HTTPS, HTTP/2, 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又愛又恨的程序員。
參考The Google Chrome Comic
Inside Chrome: The Secret Project to Crush IE and Remake the Web
From PM to CEO: How Sundar Pichai’s Background in Product Paved the Way for Becoming CEO at Google
Chrome is turning into the new Internet Explorer 6
From 0 to 70% Market Share: How Google Chrome Ate the Internet
Google Chrome launch
Modern Multi-Process Browser Architecture
Photos: 10 years of Google Chrome
Timeline: The 30-Year History of the World Wide Web
How we designed Chrome 10 years ago
The Chromium Projects: Core Principles
關于FundebugFundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了20億+錯誤事件,付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對1、微脈、青團社等眾多品牌企業。歡迎大家免費試用!
版權聲明轉載時請注明作者 Fundebug以及本文地址:
https://blog.fundebug.com/2019/08/08/how-does-chrome-succeed/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106530.html
摘要:摘要性能彪悍的引擎。深入淺出系列深入淺出第課箭頭函數中的究竟是什么鬼深入淺出第課函數是一等公民是什么意思呢深入淺出第課什么是垃圾回收算法深入淺出第課是如何工作的最近,生態系統又多了個非常硬核的項目。 摘要: 性能彪悍的V8引擎。 《JavaScript深入淺出》系列: JavaScript深入淺出第1課:箭頭函數中的this究竟是什么鬼? JavaScript深入淺出第2課:函數是一...
摘要:摘要是如何回收內存的深入淺出系列深入淺出第課箭頭函數中的究竟是什么鬼深入淺出第課函數是一等公民是什么意思呢深入淺出第課什么是垃圾回收算法最近垃圾回收這個話題非常火,大家不能隨隨便便的扔垃圾了,還得先分類,這樣方便對垃圾進行回收再利用。 摘要: JS是如何回收內存的? 《JavaScript深入淺出》系列: JavaScript深入淺出第1課:箭頭函數中的this究竟是什么鬼? Jav...
摘要:前言最近,朋友問了我這樣一個問題在中的運算結果,為什么是這樣的雖然我告訴他說,這是由于浮點數精度問題導致的。由于可以用階碼移動小數點,因此稱為浮點數。它的實現遵循標準,使用位精度來表示浮點數。 showImg(https://segmentfault.com/img/remote/1460000018981071); 前言 最近,朋友 L 問了我這樣一個問題:在 chrome 中的運算...
摘要:函數是一等公民,是什么意思呢我來與大家探討一下,拋磚引玉。對于來說,函數可以賦值給變量,也可以作為函數參數,還可以作為函數返回值,因此中函數是一等公民。也就是說,函數為第一公民是函數式編程的必要條件。 摘要: 聽起來很炫酷的一等公民是啥? 《JavaScript深入淺出》系列: JavaScript深入淺出第1課:箭頭函數中的this究竟是什么鬼? JavaScript深入淺出第2課...
摘要:箭頭函數沒有自己的值,箭頭函數中所使用的來自于函數作用域鏈。使用箭頭函數打印對于內層函數,它本身并沒有值,其使用的來自作用域鏈,來自更高層函數的作用域。 《JavaScript 深入淺出》系列: JavaScript 深入淺出第 1 課:箭頭函數中的 this 究竟是什么鬼? JavaScript 深入淺出第 2 課:函數是一等公民是什么意思呢? 普通函數與箭頭函數 普通函數指的是...
閱讀 1808·2019-08-30 13:54
閱讀 2725·2019-08-29 17:27
閱讀 1109·2019-08-29 17:23
閱讀 3350·2019-08-29 15:20
閱讀 1225·2019-08-29 11:28
閱讀 1566·2019-08-26 10:39
閱讀 1315·2019-08-26 10:29
閱讀 639·2019-08-26 10:13