JavaScript深入浅出第5课Chrome是如何成功的

摘要： 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 究竟有哪些不一样呢？

1. 简洁的用户界面(Simplicity)
2. 多进程架构(Stability, Speed, Security)
3. JavaScript 引擎 V8(Speed)
4. 渲染引擎 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 的测试结果：

图片来源：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

关于 Fundebug

Fundebug 专注于 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/