浏览器发展历程及基本架构

引言

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示HTML文档、PDF、图片、视频等多媒体内容。这些网络资源的位置由 URI 来指定。

URI是统一资源标识符（Uniform Resource Identifier）和URL统一资源定位系统（uniform resource locator）略有区别。URI范围更广，你可以把URL看作是URI的子集。

上一期（传送门）有详细讲从输入URL到显示网页的过程，主要是讲数据发送和获取的中间过程，并没有详细讲浏览器。

我们每天都会花许多时间用浏览器了解外面的世界，比如看新闻、看股票、看直播、看电影、追剧、百度查资料等等，但你是否真的熟悉和我们朝夕相处的浏览器，虽然普通用户也不需要了解很多，但对于学计算机专业的同学来说，还是很有必要了解的。本期就来详细介绍浏览器的运作原理。

浏览器发展过程

1980年代初，一位名叫 蒂姆·伯纳斯-李 的英国研究员创建了一个名为 Inquire 的程序，他在瑞士的欧洲核研究组织（CERN）工作，它创造这个程序旨在与同事们更容易共享信息。

1990年，第一款浏览器 WorldWideWeb 问世于 CERN 。 Web 浏览器简而言之，就是一个计算机程序，其目的是显示和检索数据。显示数据所需要的参数，就是使用存储在服务器上的每个网页的 URL。在浏览器输入地址，浏览器将使用该地址来获取你想要查看的信息。浏览器的另一个关键功能是以易于人类阅读的方式解释和呈现计算机代码。

截至到2008年chrome浏览器出现，主流浏览器已悉数登场。到了2012年，仅用了4年时间，chrome浏览器便成为全球最受欢迎的浏览器。到了2015年，微软摒弃IE，推出全新的Edge浏览器试图与chrome抗衡。

据2022年4月统计数据，谷歌的Chrome浏览器以 66.64% 的份额称霸浏览器世界；Edge占有率为10.07%排在第二。排在第三、第四、第五和第六位的浏览器分别是 Safari 占 9.61%；Firefox 占 7.86%；Opera 占 2.43%；Internet Explorer 占 0.97%。注意，虽然Edge排第二，但它使用的是谷歌的Chromium内核。

我们挑几个历史上比较有影响力的浏览器来讲，首先是Mosaic。它是第一个得到普遍使用以及能够显示图片的网页浏览器，由NCSA组织在1993年发表，于1997年1月7日停止开发和支持，这款浏览器在当时大受欢迎。Mosaic的出现，算是点燃了后期互联网热潮的火种之一。后来 Netscape Navigator 浏览器的开发，聘用了许多原有的 Mosaic 浏览器工程师，但是没有采用 Mosaic 网页浏览器的任何代码。传承网景浏览器代码的后继是Firefox浏览器。

然后就是Netscape浏览器，Marc Andreesen 与 Jim Clark 于 1994 年成立了一家公司，当时 Mosaic 还是最流行的浏览器，它们计划打造出一个比 Mosaic 更好的浏览器。他们的第一个浏览器被称为 Mosaic Netscape 0.9，不久更名 Netscape。得益于 JavaScript 和partial-screen loading等功能，它很快成为市场领导者，占据了浏览器市场上一半的份额，最流行的时候，网景浏览器的市场占有率近90%。

JavaScript诞生于1995年，它是Netscape的Brendan Eich 仅花费十天设计实现的。
partial-screen loading指即使页面未完全加载，用户也可以开始阅读页面上的详细信息，这一个新概念极大地丰富了在线体验
1995年8月9日，网景公开募股，最初的价格是14美元一股，但后来阴差阳错，改为28美元一股发行，当天收盘时，网景的股票成了75美元一股，网景成为了当时世界上市值最高的互联网公司，Netscape 的 IPO 也助长了日益增长的网络泡沫。

Netscape 最初的成功向那些在计算机和互联网领域工作的人证明时代已经永远改变了，这让当时业内最强大的参与者感到震惊，一家名为 Microsoft 的西雅图公司就是其中之一。计算机将通过浏览器运行，浏览器可以在任何机器上运行，从而使软件行业降低其进入壁垒，这导致许多人猜测「操作系统的时代已经结束」。Netscape 对微软来说是一个挑战，微软在 1990 年代后期创建了自己的浏览器 Internet Explorer，当时的IE和现在一样，通常被视为劣质产品。由于「微软已经建立了销售其专有操作系统 Windows 的帝国」，因此将这种由 Netscape 等公司带头的发展视为一种威胁。微软通过对其产品的大量投资，使其与 Netscape 一样好，成功地扭转了浏览器行业的局面。Windows 计算机在发布时已经安装了 Internet Explorer，这使其能够在市场上占据一席之地并不断发展壮大，最终在浏览器领域取得了胜利，这便是著名的「第一次浏览器大战」。

市场份额的快速下滑导致 Netscape 被出售给 AOL，2003年7月，网景解散，就在解散的当天，Mozilla基金会成立，2004年基于Mozilla源码的Firefox首次登台，拉开了第二次浏览器大战的序幕。2007年12月28日，AOL发博客表示将停止网景浏览器的开发 ，并于2008年3月1日停止安全更新和所有的技术支持，当年的盛行一时的浏览器帝国正式退出历史舞台。

到 2003 年，微软的 Internet Explorer 控制了 92% 以上的市场，完全扭转了 1995 年的局面。然而，虽然微软在不到十年的时间里成功地完全接管了浏览器市场，但很快就会出现其他竞争，再次重塑网络浏览器的历史。微软在 90 年代后期崛起，击败 Netscape 等公司后，浏览器的历史似乎已经走到了尽头。然而，正如最初发布的情况一样，Internet Explorer 正在成为劣质产品。谷歌于 2008 年推出了其专有浏览器——Chrome。到 2012 年底，即推出仅四年后，谷歌 Chrome 浏览器凭借其易用性、跨平台功能、速度以及与标签和书签相关的特殊功能，取代 Internet Explorer 成为最受欢迎的浏览器。

在 2000 年代初期，可能是在微软将浏览器附加到其操作系统之后，Apple 发布了 Safari，一种专为 Mac 设计的浏览器，并迅速成为当时市场上第二大浏览器。

Internet Explorer 的流行度在 2000 年后逐渐减小，主要是因为它更新缓慢、技术过时，Microsoft 也意识到这一点，于是着手解决这个问题，但发现一个关键问题是“Internet Explorer”这个名字已经成为劣质浏览器的同义词。因此，为了尝试重新进入游戏，微软不得不重新命名，Edge 诞生。Edge是微软浏览器的最新版本，它受到了很多好评，但对于 Microsoft 来说，Edge 的出现可能为时已晚。

IE浏览器终成时代之泪，Microsoft Edge 成为Windows 11的默认浏览器。这是Windows系统更新20年来，IE的首次缺席，也是最后一次。早在Win10更新时微软就表示，将放弃更新IE转向开发新的浏览器Microsoft Edge。如今是彻底要和桌面上的IE说再见了。随着Windows 11的发布，IE浏览器正式退出历史舞台，只能在更老的系统中看见它的身影。

浏览器体系结构

计算机体系结构大致分三层：硬件 ---- 操作系统 ---- 应用程序。硬件主要包括CPU和GPU，过去 CPU 大多是单核的。随着半导体的发展，现在的CPU大多是双核以上，可以提供更多的计算能力。图形处理器（Graphics Processing Unit， GPU）与 CPU 不同，GPU 擅长同时处理跨内核的简单任务。它最初是为解决图形而开发的。这就是为什么在图形环境中“使用 GPU” 或 “GPU 支持”都与快速渲染和顺滑交互有关。GPU 只能处理有限任务。

进程可以被描述为是一个应用的执行程序。线程是位于进程内部并执行其进程程序的任意部分。启动应用时会创建一个进程。程序也许会创建一个或多个线程来帮助它工作。操作系统为进程提供了一个可以使用的“一块”内存，所有应用程序状态都保存在该私有内存空间中。关闭应用程序时，相应的进程也会消失，操作系统会释放内存。

进程可以请求操作系统启动另一个进程来执行不同的任务。此时，内存中的不同部分会分给新进程。如果两个进程需要对话，他们可以通过IPC来进行。许多应用都是这样设计的，如果一个进程失去响应，该进程可以在不停止其他进程运行的情况下重新启动。

浏览器进程结构

如何构建 web 浏览器并不存在标准规范，一个浏览器的构建方法可能与另一个截然不同。不同浏览器的进程/线程架构一般有以下几部分：Browser Process、Network Process、GPU Process、Renderer Process等等。

Chrome 架构如下图所示，渲染进程下显示了多个层，表明 Chrome 为每个标签页运行多个渲染进程。

上图中，顶部是浏览器进程，它与处理其它任务的进程进行协调。对于渲染进程来说，创建了多个渲染进程并分配给了每个标签页。Chrome 在可能的情况下会给每个标签页分配一个进程。而现在它试图给每个站点分配一个进程，包括 iframe。

• 浏览器进程：控制应用中的 “Chrome” 部分，包括地址栏，书签，回退与前进按钮，以及处理 web 浏览器中网络请求、文件访问等不可见的特权部分；

• 渲染进程：控制标签页内网站展示；

• 插件进程：控制站点使用的任意插件，如 Flash；

• GPU进程：处理独立于其它进程的 GPU 任务。GPU 被分成不同进程，因为 GPU 处理来自多个不同应用的请求并绘制在相同表面。

可以简单理解为不同进程对应浏览器 UI 的不同部分。Chrome 更多的是把自己抽象为一个操作系统，网页或扩展相当于应用程序，而Chrome 确实自带了一个任务管理器，在任务管理器面板会列出当前正在运行的进程以及它们当前的 CPU/内存使用量情况等信息。一般有两种方法打开Chrome任务管理器：在浏览器顶栏右键，选择任务管理器查看；在Chrome 浏览器右上角三个点，选择“更多工具”，点击“任务管理器”。

Chrome 使用多个渲染进程，有什么好处呢？首先是稳定性：最简单的情况下，你可以想象每个标签页都有自己的渲染进程。假设你打开了三个标签页，每个标签页都拥有自己独立的渲染进程。如果某个标签页失去响应，你可以关掉这个标签页，其它标签页依然正常运行。如果所有标签页都运行在同一进程上，那么当某个失去响应，所有标签页都会失去响应。

其次就是安全性与沙箱化：把浏览器工作分成多个进程的另一好处是安全性与沙箱化。由于操作系统提供了限制进程权限的方法，浏览器就可以用沙箱保护某些特定功能的进程。例如，Chrome 浏览器可以限制处理用户输入（如渲染器）的进程的文件访问的权限。

由于进程有自己的私有内存空间，所以它们通常包含公共基础设施的拷贝(如Chrome V8引擎)。这意味着使用了更多的内存，如果它们是同一进程中的线程，就无法共享这些拷贝（同一个进程中的线程不共享堆栈，堆栈是保证线程独立运行所必须的）。为了节省内存，Chrome 对可启动的进程数量有所限制。具体限制数值依设备可提供的内存与 CPU 能力而定，当 Chrome 运行时达到限制时，会开始在同一站点的不同标签页上运行同一进程。

Chrome 正在经历架构变革，它转变为将浏览器程序的每一模块作为一个服务来运行，从而可以轻松实现进程的拆解或聚合。具体表现是，当 Chrome 运行在「强力硬件」上时，它会将每个服务分解到不同进程中，从而「提升稳定性」，但是如果 Chrome 运行在资源有限的设备上时，它会将服务聚合到一个进程中从而「节省了内存占用」。在这一架构变革实现前，类似的整合进程以减少内存使用的方法已经在 Android 类平台上使用。

Chrome 67 版本后，桌面版 Chrome 都默认开启了站点隔离，每个标签页的 iframe 都有一个单独的渲染进程。启用站点隔离是多年来工程人员努力的结果。站点隔离并不只是分配不同的渲染进程这么简单。它从根本上改变了 iframe 的通信方式。在一个页面上打开开发者工具，让 iframe 在不同的进程上运行，这意味着开发者工具必须在幕后工作，以使它看起来无缝。即使运行一个简单的 Ctrl + F 来查找页面中的一个单词，也意味着在不同的渲染器进程中进行搜索。浏览器工程师把发布站点隔离功能作为一个重要里程碑。

浏览器整体架构

浏览器的主要任务之一就是渲染展示页面，不同的浏览器内核，渲染过程也不完全相同，但大致流程都差不多，下面这张图片是火狐浏览器开发文档中的一张图片。

上面这张图片大体揭示了浏览器的渲染展示流程，但是从浏览器的整体架构上来说，上面的图片展示的只是浏览器体系中的冰山一角。通常意义下，浏览器架构如下图：

用户界面
包括地址栏、前进/后退按钮、书签菜单等。除了主窗口显示的请求的页面外，其它各个部分都属于用户界面。

浏览器引擎
用户界面和渲染引擎的桥梁，在用户界面和渲染引擎之间传送指令。浏览器引擎提供了开始加载URL资源 和一些其他高级操作方法，比如：重新加载、前进、后退动作，错误信息、加载进度等。

渲染引擎
负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。

所谓浏览器内核就是指浏览器最重要或者说核心的部分"Rendering Engine"，译为"渲染引擎"。负责对网页语法的解析，比如HTML、JavaScript，并渲染到网页上。所以浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定这浏览器如何显示页面的内容和页面的格式信息。不同的浏览器内核对语法的解释也不相同，因此同一网页在不同内核的浏览器显示的效果也会有差异（浏览器兼容）。这也就是网页开发者在不需要同内核的浏览器中测试网页显示效果的原因。

曾红极一时的红芯浏览器，官网对其介绍是：拥有智能的认证引擎、渲染引擎、管控引擎，而且还有强大的“国密通讯协议”，支持统一管控、远程控制。2018年8月15日，红芯浏览器被爆出打开安装目录后出现大量和谷歌Chrome浏览器一致的同名文件，其安装程序的文件属性中也显示了原始文件名chrome.exe，红芯浏览器的官网已撤下了浏览器的下载链接。8月16日，红芯联合创始人高婧回应，红芯浏览器“包含‘Chrome’在里面”，但并非抄袭，而是“站在巨人的肩膀上去做创新”。

浏览器内核主要包括三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。

排版引擎：

KHTML，是HTML网页排版引擎之一，由KDE所开发。KHTML拥有速度快捷的优点，但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小。苹果电脑于2002年采纳了KHTML，作为开发Safari浏览器之用，并发布所修改的最新及过去版本源代码。后来发表的开源WebCore及WebKit引擎，它们均是KHTML的衍生产品。

WebCore是苹果开发的排版引擎，它是在另外一个排版引擎“KHTML”的基础上而来的。使用WebCore的主要有Safari浏览器。

内核引擎

浏览器的内核引擎，基本上是四分天下：

• Trident: IE 以Trident 作为内核引擎;

• Gecko: Firefox 是基于 Gecko 开发;

• WebKit: 诞生于1998年，并于2005年由Apple公司开源，Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器 基于 Webkit 开发。

• Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台–Opera mini。（2013年2月Opera宣布转向WebKit引擎，2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎。）

补充：我们经常还会听到Chromium、Webkit2、Blink这些引擎。Chromium也是基于webkit，2008年开始作为Chrome的引擎，Chromium浏览器是Chrome的实验版，实验新特性。可以简单地理解为：Chromium为实验版，具有众多新特性；Chrome为稳定版。下图是chromium 的架构：

Webkit2是2010年随OS X Lion一起面世。WebCore层面实现进程隔离与Google的沙箱设计存在冲突。

Blink则是基于Webkit2分支，是WebKit中WebCore组件的一个分支，13年谷歌开始作为Chrome 28的引擎集成在Chromium浏览器里。Android的WebView同样基于Webkit2，是现在对新特性支持度最好的内核。Opera（15及往后版本）和Yandex浏览器中也在使用。

移动端基本上全部是 Webkit 或 Blink 内核（除去 Android 上腾讯家的 X5），这两个内核对新特性的支持度较高，所以新特性可以在移动端大展身手。

上图是各内核之间的关系。

OK本期就到这里，更多内容敬请关注笔者公众号：极客随想。