作者
零一责编
晋兆雨
本文用47张图带你了解「浏览器的发展史」、「浏览器的架构」、「浏览器的基本原理」以及「浏览器的其它小知识」
浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示HTML文档、PDF、图片、视频等网络内容。这些网络资源的位置由用户使用URI（统一资源标示符）来指定指定。
或许在大多数人眼中，浏览器是这样的：
大多数人眼中的浏览器
「一个展示前端，一个未知的中间层连接着网络世界」；甚至，网络世界也可以省略：一台显示器，一个神秘的幕后黑盒。
如果你是一个前端开发者，甚至每天浏览器陪伴你度过的时光比女朋友陪伴你的都要久，想想那每一个令人“不是那么期待”的早晨，每一个争分夺秒完成任务的黄昏，只有浏览器和编辑器一直是你忠实的伙伴。而「就连你一直离不开的VSCode编辑器，甚至也与浏览器有着莫大的渊源」。
屏幕前的朋友，你熟悉自己身边的那些人吗，熟悉那些与你朝夕相伴的朋友吗？也许熟悉，也许不，那么，你是否愿意花些时间来熟悉一下这个在大量时间里与你有着莫大交集的浏览器的内心世界呢？
今天，我们就来一探究竟，走进这个我们与网络连接最紧密的中间地带。全文行文结构大概如下：
目录结构
浏览器发展简史
浏览器的诞生与发展
也许你知道，第一款浏览器——WorldWideWeb，诞生于年。但是现代浏览器的雏形却孕育于s年代。
一位名叫蒂姆·伯纳斯-李的英国科学家在年代初期创建了一个名为Inquire的计算机程序，当时他在总部位于瑞士的欧洲核研究组织（CERN，以其法文字母表示）工作。该计划旨在「使在CERN工作的许多不同个人更容易共享信息」。
年，第一款浏览器问世于TimBerners-Lee在CERN工作期间。您可能想知道Web浏览器到底是什么，简而言之，它是一个计算机程序，其目的是显示和检索数据。使用分配给存储在网络服务器上的每个数据集（网页）的URL，它可以做到这一点。所以这意味着「当您在浏览器中输入内容时，您实际上是在输入地址」，浏览器将使用该地址来获取您想要查看的信息。「浏览器的另一个关键功能是以易于理解的方式向您解释和呈现计算机代码」。
下图简单罗列了截止年浏览器的发展简史：
Timeline_of_the_Web_Browsers
早期比较有名、有意义的浏览器主要包括Erwise、ViolaWWW、Mosaic、NetscapeNavigator：
The-Early-Browsers
年浏览器诞生之后的故事，想必您已经早有耳闻：
「NCSAMosaic」，或简称Mosaic，是互联网历史上「第一个获普遍使用和能够显示图片的网页浏览器」。它由伊利诺伊大学厄巴纳-香槟分校的NCSA组织在年发表，并于年1月7日正式终止开发和支持，这款浏览器在当时大受欢迎。Mosaic的出现，算是点燃了后期互联网热潮的火种之一。后来NetscapeNavigator浏览器的开发，聘用了许多原有的Mosaic浏览器工程师，但是没有采用Mosaic网页浏览器的任何代码。而传承网景浏览器代码的后裔为Firefox浏览器。
MarcAndreesen与同事JimClark于年成立了一家公司，当时Mosaic还是最流行的浏览器，它们计划打造出一个比Mosaic更好的浏览器，占领市场，让他们变得富有，并改变历史。他们的第一个浏览器被称为MosaicNetscape0.9，不久更名Netscape。得益于JavaScript（JavaScript诞生于年，它是Netscape的BrendanEich仅花费十天设计实现的。）和“partial-screenloading”（即使页面未完全加载，用户也可以开始阅读页面上的详细信息，这一个新概念极大地丰富了在线体验）等功能，它很快成为市场领导者，占据了浏览器市场上一半的份额，最疯狂的时候，网景浏览器的市场份额接近百分之九十。
年8月9日，网景公开募股，最初的价格是14美元一股，但后来阴差阳错，改为28美元一股发行，当天收盘时，网景的股票成了75美元一股，网景成为了当时世界上市值最高的互联网公司，Netscape的IPO也助长了日益增长的网络泡沫。
Netscape最初的成功向那些在计算机和互联网领域工作的人证明时代已经永远改变了，这让当时业内最强大的参与者感到震惊，一家名为Microsoft的西雅图公司就是其中之一。计算机将通过浏览器运行，浏览器可以在任何机器上运行，从而使软件行业民主化并降低其相当大的进入壁垒，这导致许多人猜测「操作系统的时代已经结束」。Netscape对微软来说是一个挑战，微软在年代后期创建了自己的浏览器InternetExplorer，当时的IE和现在一样，通常被视为劣质产品。由于「微软已经建立了销售其专有操作系统Windows的帝国」，因此将这种由Netscape等公司带头的发展视为一种威胁。微软通过对其产品的大量投资，使其与Netscape一样好，成功地迅速扭转了浏览器行业的局面。Windows计算机在发布时已经安装了InternetExplorer（Microsoft的浏览器），这使其能够在市场上占据一席之地并不断发展壮大，最终在浏览器领域取得了胜利，这便是著名的「第一次浏览器大战」。
Market_Share_During_the_Browser_Wars
市场份额的快速下滑导致Netscape被出售给了AOL，年7月，网景解散，就在解散的当天，Mozilla基金会成立，年基于Mozilla源码的Firefox首次登台，拉开了第二次浏览器大战的序幕。年Netscape最终灭绝，「当年的浏览器帝国正式退出了历史的舞台」。
到年，微软的InternetExplorer控制了92%以上的市场，完全扭转了年的局面。然而，虽然微软在不到十年的时间里成功地完全接管了浏览器市场，但很快就会出现其他竞争，再次重塑网络浏览器的历史。
微软在年代后期崛起并让Netscape等公司屈服之后，浏览器的历史似乎已经走到了尽头。然而，正如最初发布后的情况一样，InternetExplorer正在成为劣质产品。谷歌于年推出了其专有浏览器——Chrome。到年底，即推出仅四年后，谷歌Chrome浏览器凭借其易用性、跨平台功能、速度以及与标签和书签相关的特殊功能，取代InternetExplorer成为最受欢迎的浏览器。
在年代初期，可能是在微软将浏览器附加到其操作系统之后，Apple发布了Safari，一种专为Mac设计的浏览器，并成为目前市场上第二大浏览器。
InternetExplorer的流行度在年代后期逐渐减少，主要是因为它变得缓慢和过时，而Microsoft发现自己现在似乎已经是在外面观察浏览器世界。该公司不想继续错过，于是着手解决这个问题，但发现一个关键问题是“InternetExplorer”这个名字已经成为劣质浏览器的同义词。因此，为了尝试重新进入游戏，微软不得不重新命名，是以，Edge变诞生了。Edge是微软浏览器的最新版本，它受到了很多好评，但对于Microsoft来说，Edge的出现可能为时已晚。
「IE浏览器终成时代之泪，MicrosoftEdge成为Windows11的默认浏览器」。这是Windows系统更新20年来，IE的首次缺席，也是最后一次。早在Win10更新时微软就表示，将放弃更新IE转向开发新的浏览器MicrosoftEdge。如今是彻底要和桌面上的IE说再见了。——IE浏览器将从Windows11中消失，它也将在年安息。
浏览器市场份额
截止年7月初，浏览器市场份额如下所示。
浏览器使用趋势变化：
Web_Browser_Usage_Trends
浏览器市场份额：
Web_Browser_Market_Share
国内浏览器市场份额：
Web_Browser_Market_Share_CHN
如果你对以上浏览器市场份额数据有兴趣，可以通过以下链接进行查看：
国内浏览器市场份额
浏览器市场份额[1]
全球浏览器市场份额
全球浏览器市场份额[2]
w3counter[3]
浏览器架构
计算机的核心
三层计算机体系结构：底部是机器硬件，中间是操作系统，顶部是应用程序。
hw-os-app
当你在电脑或手机上启动应用时，是「CPU和GPU为应用供能」。通常情况下应用是通过操作系统提供的机制在CPU和GPU上运行。
CPU
中央处理器（CentralProcessingUnit），或简称为CPU。CPU可以看作是计算机的大脑。「一个CPU核心如图中的办公人员，可以逐一解决很多不同任务」。它可以在解决从数学到艺术一切任务的同时还知道如何响应客户要求。过去CPU大多是单芯片的。随着现代硬件发展，你经常会有不止一个内核，为你的手机和笔记本电脑提供更多的计算能力。
4个CPU核心作为办公人员，坐在办公桌前处理各自的工作：
CPU
GPU
图形处理器（GraphicsProcessingUnit，简称为GPU）是计算机的另一部件。与CPU不同，GPU擅长同时处理跨内核的简单任务。顾名思义，「它最初是为解决图形而开发的」。这就是为什么在图形环境中“使用GPU”或“GPU支持”都与快速渲染和顺滑交互有关。近年来随着GPU加速计算的普及，仅靠GPU一己之力也使得越来越多的计算成为可能。
下图中，许多带特定扳手的GPU内核意味着它们只能处理有限任务。
GPU
进程与线程
进程可以被描述为是一个应用的执行程序。线程是位于进程内部并执行其进程程序的任意部分。
启动应用时会创建一个进程。程序也许会创建一个或多个线程来帮助它工作。操作系统为进程提供了一个可以使用的“一块”内存，所有应用程序状态都保存在该私有内存空间中。关闭应用程序时，相应的进程也会消失，操作系统会释放内存（下图中，边界框为进程，线程作为抽象鱼在进程中游动）。
memory
进程可以请求操作系统启动另一个进程来执行不同的任务。此时，内存中的不同部分会分给新进程。如果两个进程需要对话，他们可以通过**进程间通信（IPC）**来进行。许多应用都是这样设计的，所以如果一个工作进程失去响应，该进程就可以在不停止应用程序不同部分的其他进程运行的情况下重新启动。
workerprocess.gif
浏览器的进程/线程架构模型
浏览器进程分类
关于如何「构建web浏览器并不存在标准规范」，一个浏览器的构建方法可能与另一个迥然不同。不同浏览器的进程/线程架构一般由下图几部分：
browser-arch
Chrome多进程架构
而当下“浏览器世界的王者”Chrome架构如下图所示，渲染进程下显示了多个层，表明Chrome为每个标签页运行多个渲染进程。
browser-arch-chrome
上图中，顶部是浏览器进程，它与处理应用其它模块任务的进程进行协调。对于渲染进程来说，创建了多个渲染进程并分配给了每个标签页。Chrome在可能的情况下会给每个标签页分配一个进程。而现在它试图给每个站点分配一个进程，包括iframe。
浏览器进程：控制应用中的“Chrome”部分，包括地址栏，书签，回退与前进按钮，以及处理web浏览器中网络请求、文件访问等不可见的特权部分；
渲染进程：控制标签页内网站展示；
插件进程：控制站点使用的任意插件，如Flash；
GPU进程：处理独立于其它进程的GPU任务。GPU被分成不同进程，因为GPU处理来自多个不同应用的请求并绘制在相同表面。
可以简单理解为不同进程对应浏览器UI的不同部分：
browserui
「Chrome更多的是把自己抽象为一个操作系统，网页或扩展相当于一个个程序」，你甚至可以发现，Chrome确实自带了一个任务管理器，在任务管理器面板会列出当前正在运行的进程以及它们当前的CPU/内存使用量情况等信息。
一般你可以通过两种方法打开Chrome任务管理器：
通过在浏览器顶栏（标签tab栏）右侧右键，选择任务管理器查看；
点击Chrome浏览器右上角的“选项”菜单（一般是三个点的标识），选择“更多工具”子菜单，点击“任务管理器”，打开任务管理器窗口。
task
前文中提到了Chrome使用多个渲染进程，那他有什么优势呢？
稳定性：最简单的情况下，你可以想象每个标签页都有自己的渲染进程。假设你打开了三个标签页，每个标签页都拥有自己独立的渲染进程。如果某个标签页失去响应，你可以关掉这个标签页，此时其它标签页依然运行着，可以正常使用。如果所有标签页都运行在同一进程上，那么当某个失去响应，所有标签页都会失去响应，显然这样的体验会很糟糕。下面是多/单进程架构的对比动图，供你参考。
tabs.gif
安全性与沙箱化：把浏览器工作分成多个进程的另一好处是安全性与沙箱化。由于操作系统提供了限制进程权限的方法，浏览器就可以用沙箱保护某些特定功能的进程。例如，Chrome浏览器可以限制处理用户输入（如渲染器）的进程的文件访问的权限。
由于进程有自己的私有内存空间，所以它们通常包含公共基础设施的拷贝(如ChromeV8引擎)。这意味着使用了更多的内存，如果它们是同一进程中的线程，就无法共享这些拷贝（同一个进程中的线程不共享堆栈，堆栈是保证线程独立运行所必须的）。为了节省内存，Chrome对可启动的进程数量有所限制。具体限制数值依设备可提供的内存与CPU能力而定，但是「当Chrome运行时达到限制时，会开始在同一站点的不同标签页上运行同一进程」。
Chrome正在经历架构变革，它转变为将浏览器程序的每一模块作为一个服务来运行，从而可以轻松实现进程的拆解或聚合。具体表现是，当Chrome运行在「强力硬件」上时，它会将每个服务分解到不同进程中，从而「提升稳定性」，但是如果Chrome运行在资源有限的设备上时，它会将服务聚合到一个进程中从而「节省了内存占用」。在这一架构变革实现前，类似的整合进程以减少内存使用的方法已经在Android类平台上使用。
servicfication.gif
Chrome67版本后，桌面版Chrome都默认开启了「站点隔离」，每个标签页的iframe都有一个单独的渲染进程。启用站点隔离是多年来工程人员努力的结果。站点隔离并不只是分配不同的渲染进程这么简单。它从根本上改变了iframe的通信方式。在一个页面上打开开发者工具，让iframe在不同的进程上运行，这意味着开发者工具必须在幕后工作，以使它看起来无缝。即使运行一个简单的Ctrl+F来查找页面中的一个单词，也意味着在不同的渲染器进程中进行搜索。你可以看到为什么「浏览器工程师把发布站点隔离功能作为一个重要里程碑」！
isolation
延伸阅读：Chrome为什么多进程而不是多线程？[4]
浏览器整体架构
如果您是一名前端工程师，那么，面试时你大概率会被问到过：从URL输入到页面展现到底发生了什么？，如果您对这一过程不太熟悉，建议看看下面两篇文章，在此不过多赘述：
经典面试题：从URL输入到页面展现到底发生什么？[5]
在浏览器输入URL回车之后发生了什么（超详细版）[6]
浏览器的主要任务之一就是渲染展示页面，不同的浏览器内核，渲染过程也不完全相同，但大致流程都差不多，下面这张图片是火狐浏览器（Firefox，可以认为是Netscapede的涅槃重生）开发文档中的一张图片。
浏览器架构
上面这张图片大体揭示了浏览器的渲染展示流程，但是从浏览器的整体架构上来说，上面的图片展示的也许只是浏览器体系中的冰山一角。
通常意义下，浏览器架构是如下图这样的：
浏览器架构
用户界面
包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
浏览器引擎
用户界面和渲染引擎的桥梁，在用户界面和渲染引擎之间传送指令。浏览器引擎提供了开始加载URL资源和一些其他高级操作方法，比如：重新加载、前进、后退动作，错误信息、加载进度等。
渲染引擎
负责显示请求的内容。如果请求的内容是HTML，它就负责解析HTML和CSS内容，并将解析后的内容显示在屏幕上。
所谓浏览器内核就是指浏览器最重要或者说核心的部分"RenderingEngine"，译为"渲染引擎"。负责对网页语法的解析，比如HTML、JavaScript，并渲染到网页上。所以浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定这浏览器如何显示页面的内容和页面的格式信息。不同的浏览器内核对语法的解释也不相同，因此同一网页在不同内核的浏览器显示的效果也会有差异（浏览器兼容）。这也就是网页开发者在不需要同内核的浏览器中测试网页显示效果的原因。
RENDERINGENGINE
延伸阅读：曾红极一时的红芯浏览器，