从今天起，我们重新认识浏览器（上）

倪俊杰

编者按：当今世界，信息技术日新月异，互联网正在改变社会和生活的方方面面，引领了社会产生新变革，创造了人类生活新空间。上网，已经像吃饭一样，成为人们每天不可或缺的“必修课”。当我们已经习惯了打开浏览器，输入网址就能轻松连接世界的时候，是否有过疑惑：这个小小的浏览器是如何将我们“带”到世界的各个角落的？浏览器的运行机制是什么？浏览器还有哪些新玩法？相信会有很多读者也会对此感兴趣，我们将从本期开始带领大家重新认识浏览器。

通过一个窗口就能够连接世界。当你用浏览器时有没有想过浏览器是怎么来的？为什么浏览器能够上网？浏览器有哪些奥秘？伴随着各种各样的疑问，我们先来了解浏览器的发展历史。

小窗口，大世界

浏览器的发展史，可以说是众多浏览器豪门的争霸史，当然，也是一段血泪史。我们先来看百度统计公布的最近6个月的浏览器市场份额情况（如图1）。排名第一的是谷歌公司的Chrome浏览器，占据了半壁江山。事实上，Chrome浏览器并不是最早的浏览器，而是“半路杀出的程咬金”。

世界上最早的浏览器，是Timothy John Berners-Lee在1990年发明的网页浏览器WorldWideWeb。从那时起，浏览器的发展就和网络的发展联系在了一起。后来又改名为Erwise浏览器，采用图形化界面，由罗伯特·卡里奥发起开发的。由此，便开启了浏览器的争霸史了。

1993年，马克·安德森发布了Mosaic浏览器。不过，他很快辞职并成立了自己的公司（网景通讯公司），发布了当时世界上最流行的浏览器Netscape，市场占有率一度达到90%。网景公司的浏览器发展史就像一部豪门争斗剧，起伏跌宕，很有意思。

这时，科技巨头微软坐不住了，急忙从其他公司购买了浏览器技术，发布Internet Explorer，也就是IE浏览器。由此掀起了软件巨头微软和网景之间的浏览器大战，也同时加快了互联网的发展。不过，与Netscape公司不同的是，微软借助Windows操作系统的优势，直接捆绑了IE。说白了，微软免费赠送IE浏览器，只要购买了操作系统就可以直接使用。这样一来，IE在网页浏览器市场就占据了主导地位，其市场占有率于2002年最高时超过95%。

胳膊拧不过大腿。1998年，Netscape在与微软竞争失利以后，为了挽回市场，公布旗下所有软件以后的版本皆为免费，并开放Netscape浏览器的源代码，成立了非正式组织Mozilla Application Suite。可惜的是，Netscape还是在1998年底被收购了。直到2002年，又派生出了Phoenix（后改名Firebird，最后又改为Firefox）浏览器，也总算保留了“豪门血脉”，在市场上还占有一席之地。

在此期间，还出现了其他浏览器。比如Opera，是挪威Opera Software ASA公司旗下的一个灵巧的浏览器，发布于1996年。它在手持电脑上十分流行，不过它在个人电脑网络浏览器市场上的占有率较小。2003年，苹果公司在苹果手机上开发了Safari浏览器，并利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。Safari是现在苹果默认的浏览器。Lynx浏览器是Linux市场上十分流行的浏览器。它是全文字模式的浏览器，视觉上并不太好。还有一些有着进阶功能的同类型浏览器，如Links和它的分支ELinks。

正当大家觉得浏览器的竞争要消停了的时候，2008年Chrome横空出世。因Chrome具有界面简洁、加载快速、数据安全等特点，其市场份额逐步攀升。微软意识到Chrome在逐步侵蚀自己的市场时，开始频繁更新IE。2011年IE9发布，2012年IE10发布，2013年IE11发布，最后IE的代码实在适应不了新的要求的WEB技术，就重新开发了一个名为“Edge”的浏览器用来取代IE，但还是挡不住Chrome成为市场份额第一的命运。据最新消息，微软表示Edge也将采用Chrome内核，看来还是值得期待的。

有人的地方就有江湖，不管如何，瀏览器之间的斗争永远不会停歇。

浏览器，不简单

既然要认识浏览器，就肯定要知道浏览器是由哪些部件组成的。

1.浏览器的组成

浏览器一般由七个模块组成：User Interface（用户界面）、Browser engine（浏览器引擎）、Rendering engine（渲染引擎）、Networking（网络）、JavaScript Interpreter（JS解释器）、UI Backend（UI后端）、Date Persistence（数据持久化存储）（如图2）。[1]

其中，用户界面模块包括地址栏、后退/前进按钮、书签目录等，也就是大家所看到的除了页面显示窗口之外的其他部分；浏览器引擎的作用是在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心部分；渲染引擎是用来解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎；网络是完成网络调用或资源下载的模块，没有网络就不能上网使用浏览器了；UI后端模块用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的；JS解释器用来解释执行JS脚本的模块；数据存储模块是浏览器在硬盘中保存cookie、localStorage等各种数据，可通过浏览器引擎提供的API进行调用等。

2.主流浏览器内核

一个完整的浏览器包含浏览器内核和浏览器的外壳（shell）。浏览器最重要或者说核心的部分是“Rendering Engine”，也就是“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染（显示）网页。浏览器内核又可以分为两部分：渲染引擎（Layout Engine或Rendering Engine）和JS引擎。由于JS引擎越来越独立，内核就倾向于只指渲染引擎。不同的浏览器内核对网页语法的解释不尽相同，这就导致了不同浏览器渲染出的网页可能有一些差异。[2]浏览器内核的品种很多，我们来关注一些主流的。

（1）Trident（IE内核）

Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。基于Trident内核的浏览器非常多，这是因为Trident内核提供了丰富的调用接口。国内很多的双核浏览器其中之一就是Trident，美名其曰“兼容模式”。Windows10发布后，IE将其内置浏览器命名为Edge（原名斯巴达），使用了新内核Edge引擎。代表：IE、傲游、世界之窗浏览器、Avant、搜狗浏览器、猎豹安全浏览器、360极速浏览器、百度浏览器等。

（2）Gecko（Firefox）

Gecko内核的代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎，现在主要由Mozilla基金会进行维护。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。可惜这几年它已经没落了，如打开速度慢。代表：Gecko内核的浏览器——Mozilla Firefox、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon。

（3）KHTML（Linux）

KDE开发的内核，速度快捷，容错度低。这个内核可能很多人不知道，但是后面再看下去你就明白了。代表：Konqueror。

（4）Webkit（Safari）

苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。因为是脱胎于KHTML，所以也是具有高速的特点，同样遵循W3C标准。从目前看来，WebKit内核是最有潜力而且是已经有相当成绩的新兴内核，性能非常好，而且对W3C标准的支持很完善。代表：Safari、Symbian手机浏览器、Android 默认浏览器。

（5）Presto（Opera）

Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，如网页或其部分可随着DOM及Script语法的事件而重新排版。在2013年之后，Opera宣布加入谷歌阵营，弃用了Presto。

（6）Blink（Chrome）

由Google和Opera Software开发的浏览器排版引擎，2013年4月发布，现在Chrome内核是Blink。Blink其实是WebKit的分支，大部分国产浏览器最新版都采用Blink内核。

移动端的浏览器内核主要说的是系统内置浏览器的内核。目前移动设备浏覽器上常用的内核有Webkit、Blink、Trident、Gecko，其中苹果iOS平台主要是Webkit，Android4.4之前Android系统浏览器的内核是Webkit，Android4.4之后使用Blink，Windows Phone 8系统浏览器内核是Trident。

目前很多国内浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”，用户可以来回切换。

3.查看浏览器内核

查看浏览器内核的方法，一般分为直接查看浏览器版本和用第三方工具（网站）来查询。例如，360浏览器的内核可以通过点击“帮助”——“关于360安全浏览器”查到（如图3）。用第三方工具查询只要打开浏览器，输入网址（https：//ie.icoa.cn/或http：//liulanmi.com/labs/core.html），就可以查看浏览器的内核版本了（如图4）。观察版本号可知，该浏览器的主版本号是63，子版本号是0，阶段版本号是3239。

新功能，看过来

我们都知道浏览器是用来上网的，关于浏览器的一些基本功能，如设置主页、收藏、刷新、查看历史记录、代理设置、清除缓存之类的基本功能，在这里就不做介绍了。我们主要来了解一下当前主流浏览器的一些特色功能。

1.浏览器的网络收藏夹

随着互联网，特别是移动互联网的快速发展，现在很多浏览器都具有网络收藏夹的功能。无论身在何处，什么设备，只要登录自己账户，就可以随时获取收藏夹的最新内容。类似360浏览器、QQ浏览器等同时具有电脑浏览器和手机浏览器，只要使用同一个账户登录，所有设备的收藏网址都能同步，带来了极大的便利。

2.浏览器的手势功能

按住鼠标右键后，鼠标在浏览窗口里滑出一个轨迹以使用浏览器里的功能，即为鼠标手势。现在很多浏览器都具有鼠标手势功能，且不同浏览器的鼠标手势都有些类似。如图5所示分别为360浏览器和QQ浏览器的部分鼠标手势设置。

3.浏览器的皮肤

传统浏览器的界面是一成不变的，用久了会感觉比较单调，目前浏览器也推出了浏览器皮肤设置的功能，就像手机屏保一样，可以为浏览器设置不同类型的主题、壁纸作为皮肤，使其看起来更加赏心悦目。

4.跨屏浏览功能

跨屏浏览，顾名思义就是可以在多个屏幕之间切换浏览。当你用电脑上网的时候发现不错的网站，想要分享到微信朋友圈或者转发给好友，可以先将网址生成二维码，然后再用手机去扫码打开；抑或你想把电脑浏览器网站上的图片传到手机里，可以在手机上安装手机版浏览器，就可以实现了。

5.浏览器的扩展功能

浏览器扩展（又称为插件或应用）是指非官方出品的浏览器辅助程序，主流浏览器都具有扩展功能，是由第三方浏览器开发者自主开发，经审核后发布的。不同浏览器扩展的名称及功能也不相同。安装和使用浏览器扩展功能的具体介绍，我们将在下篇详细介绍。

6.全球最小的浏览器——一点浏览器

一点浏览器（http：//www.yidianliulan.com/）的完整安装包仅有约0.6M，相当于一张图片的大小。其只保留了浏览器的核心功能，摒弃复杂而无用的功能设计，运行时相对占用的系统内存很少，由此带来的是运行更流畅

要排版，用语言

很多人可能不知道，浏览器的功能不是“浏览”网站，而是解释执行HTML代码。我们使用浏览器打开各式各样的网站，看到的是五彩缤纷、绚丽多姿的页面。可事实上，每一个网页的本质其实都是一大串代码组成的，正是因为浏览器我们才能够看到这些精彩的页面。接下来，我们就来认识一下HTML代码，以及它是如何实现对网页排版的。

1.HTML语言介绍

HTML是超文本标记语言（HyperText Markup Language），其中超文本是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。网页的本质就是超级文本标记语言，通过结合使用其他的Web技术，可以创造出功能强大的网页。超级文本标记语言是万维网（Web）编程的基础。

HTML语言很大的特点是其代码有不同类型的标记符，且很多是成对出现的。例如标记符，说明该文件是用HTML语言来描述的，表示文件的开头，而则表示该文件的结尾，这两个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容。网页中显示的实际内容均包含在这两个正文标记符之间。还有