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/…