浏览器介绍

浏览器

浏览器发展历史

1991年，WorldWideWeb 浏览器发布
这款由 Web 之父 Tim Berners-Lee 亲手设计的图形化浏览器还包含一个所见即所得 HTML 编辑器，为了避免同 WWW 混淆，这个浏览器后来改名为 Nexus。

1993年，Mosaic 发布
Internet 的流行应该归功于 Mosaic，这款浏览器将 Web 带向了大众。诸如 IE， Firefox 一类的当代浏览器仍然在延用 Mosaic 的图形化操作界面思想。

1994年，Netscape 成立
Marc Andreessen 带领 Mosaic 的程序员成立了 Netscape 公司，并发布了第一款商业浏览器 Netscape Navigator。

1995年，IE 发布，浏览器之战即将爆发
微软针对 Netscape 发布了他们自己的浏览器，IE，第一场浏览器之战爆发。

1996年，Opera 发布
Telenor 是挪威最大的通讯公司，他们推出了 Opera，并在两年后进军移动市场，推出 Opera 的移动版。

1998年，Mozilla 项目成立
Netscape 成立 Mozilla 开源项目，开发下一代浏览器，后来证明，使用原有代码开发新东西是一种负担，接着他们着手从新开发。

2002年，IE 开始主导浏览器市场
市场份额达到95%，借助同操作系统的捆绑优势，IE 赢得第一场浏览器之战。

2003年，苹果 Safari 浏览器登场
苹果进入了浏览器市场，推出自己的 Webkit 引擎，该引擎非常优秀，后来被包括 Google， Nokia 之类的厂商用于手机浏览器。

2004年，Firefox 引发第二场浏览器之战
Firefox 1.0 推出。早在 Beta 测试期间就积累了大量人气的 Firefox 引发了第二场浏览器之战，当年年底，Firefox 已经赢得 7.4% 的市场份额。

2006年，IE7 发布
IE6 发布后的第六年，迫于 Firefox 的压力，微软匆匆推出 IE7 应战，吸取了 Firefox 的一些设计思想，如标签式浏览，反钓鱼等。但这款浏览器现在看来并不成功。

2008年，Google 携 Chrome 参战
Google 发布了他们自己的浏览器，加入这场战争。轻量，快，异常的稳固让这款浏览器成为不可轻视的一个对手。

浏览器结构组成

浏览器一般由七个模块组成：

User Interface（用户界面）

Browser engine（浏览器引擎）

Rendering engine（渲染引擎）

Networking（网络）

JavaScript Interpreter（js解释器）

UI Backend（UI 后端）

Date Persistence（数据持久化存储）
如下图：

用户界面 －包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了页面显示窗口之外的其他部分.

浏览器引擎 －可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心.

渲染引擎 －解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎.

网络 －用来完成网络调用或资源下载的模块

UI 后端 －用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。

JS解释器 －用来解释执行JS脚本的模块，如 V8 引擎、JavaScriptCore
数据存储 －浏览器在硬盘中保存 cookie、localStorage等各种数据，可通过浏览器引擎提供的API进行调用。

浏览器渲染引擎

浏览器渲染引擎是由各大浏览器厂商依照 W3C 标准自行研发的，也被称之为「浏览器内核」。

目前，市面上使用的主流浏览器内核有5类：
Trident
Gecko
Presto
Webkit
Blink。

Trident

Trident 就是大名鼎鼎的 IE浏览器 所使用的内核，也是很多浏览器所使用的内核，通常被称为IE内核。

基于Trident内核的浏览器非常多，这是因为Trident内核提供了丰富的调用接口。老的Trident内核（比如常说的IE6内核）一直是不遵循W3C标准的，但是由于当时IE6的市场份额最大，所以后果就是大量的网页专门为IE6等老Trident内核编写，在IE6下显示很正常，但其实这些网页的代码并不符合W3C标准，于是，完全依据W3C标准写的网页在老的Trident内核下面又出现偏差，这就是为什么很多人觉得后来的IE9的网页排版有时会乱了，而IE6则正常，其实不是浏览器兼容性差了，而是你访问的网页不符合新的标准。

目前可供调用的最新版的Trident内核是IE9所用的内核，相较之前的版本对W3C标准的支持增强了很多。

Trident内核的常见浏览器有：
IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；世界之窗、 360安全浏览器、傲游；搜狗浏览器；腾讯TT；阿云浏览器（早期版本）、百度浏览器（早期版本）、瑞星安全浏览器、Slim Browser； GreenBrowser、爱帆浏览器（12 之前版本）、115浏览器、155浏览器； 闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器；

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

Gecko

Netscape6 启用的内核，现在主要由Mozilla基金会进行维护，是开源的浏览器内核，目前最主流的Gecko内核浏览器是Mozilla Firefox，所以也常常称之为火狐内核。

因为Firefox的出现，IE的霸主地位逐步被削弱，Chrome的出现则是加速了这个进程。非Trident内核的兴起正在改变着整个互联网，最直接的就是推动了编码的标准化，也使得微软在竞争压力下不得不改进IE。

不过比较可惜的是，虽然是开源的，也开发了这么多年，基于Gecko的浏览器并不多见，除了一些简单的改动（坑爹的X浏览器）或者是重新编译（绫川ayakawa、tete009），深度定制或者增强型外壳的还比较少见。

另外就是有一些其它软件借用了Gecko内核，比如音乐管理软件SongBird。

常见的Gecko内核的浏览器：Mozilla Firefox、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon

Presto

Opera 所采用的内核，准确地说，是Opera 7.0及以后版本的内核，Opera 3.5-6.1版本使用的内核叫做Elektra。

Presto对W3C标准的支持也是很良好的。

在OperaChina论坛有人说过，Presto优先解析文字，保证可阅读性，媒体资源的渲染放后。常见的Presto内核的浏览器：Opera

Webkit

由KHTML发展而来，也是苹果给开源世界的一大贡献。是目前最火热的浏览器内核，火热倒不是说市场份额，而是应用的面积和势头。

因为是脱胎于KHTML，所以也是具有高速的特点，同样遵循W3C标准。从目前看来，WebKit 内核是最有潜力而且是已经有相当成绩的新兴内核，性能非常好，而且对W3C标准的支持很完善。

当前发展势头最强劲的WebKit内核，常见的WebKit内核的浏览器：Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

Blink

由 Google 和 Opera Software 开发，在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

Blink 其实是 Webkit 的一个分支，添加了一些优化的新特性，例如跨进程的 iframe，将 DOM 移入 JavaScript 中来提高 JavaScript 对 DOM 的访问速度等，目前较多的移动端应用内嵌的浏览器内核也渐渐开始采用 Blink。

KHTML

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

Chromium（跨平台）

其实 Chromium 就是 WebKit，*里面并没有将Chromium从WebKit分出来。

Chromium把WebKit的代码梳理得可读性提高很多，所以以前可能需要一天进行编译的代码，现在只要两个小时就能搞定。

这个也能解释为什么Gecko和WebKit出来了这么久，第三方编译、定制的版本并不多，但是由Chromium衍生出来的浏览器早就满坑满谷了。

常见的Chromium内核的浏览器：Google Chrome、Chromium、SRWare Iron、Comodo Dragon.

渲染引擎的工作流程

1.浏览器渲染引擎最重要的工作就是将 HTML 和 CSS 文档解析组合最终渲染到浏览器窗口上。如下图所示，渲染引擎在接受到 HTML 文件后主要进行了以下操作：解析 HTML 构建 DOM 树 -> 构建渲染树 -> 渲染树布局 -> 渲染树绘制。

2.解析 HTML 构建 DOM 树时渲染引擎会将 HTML 文件的便签元素解析成多个 DOM 元素对象节点，并且将这些节点根据父子关系组成一个树结构。

同时 CSS 文件被解析成 CSS 规则表，然后将每条 CSS 规则按照「从右向左」的方式在 DOM 树上进行逆向匹配，生成一个具有样式规则描述的 DOM 渲染树。

接下来就是将渲染树进行布局、绘制的过程。首先根据 DOM 渲染树上的样式规则，对 DOM 元素进行大小和位置的定位，关键属性如position;width;margin;padding;top;border;…，接下来再根据元素样式规则中的color;background;shadow;…规则进行绘制。

3.这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

需要注意的是，在浏览器渲染完首屏页面后，如果对 DOM 进行操作会引起浏览器引擎对 DOM 渲染树的重新布局和重新绘制，我们叫做**「重排」和「重绘」**

由于重排和重绘是前后依赖的关系，重绘发生时未必会触发渲染引擎的重排，但是如果发生了重排就必然会触发重绘操作，这样带来的性能损害就是巨大的。

因此我们在做性能优化的时候应该遵循避免重排；减少重绘的原则。
工作流程详解

JavaScript引擎

顾名思义，JavaScript引擎就是用来执行JS代码的。

譬如说，一个算圆周率的网页，排版引擎把页面的框架给显示出来了，但最终的结果需要用到 Javascript 来计算，所以Javascript引擎的快慢也是对整个网页的速度有着很大影响。

特别是目前越来越多类似 WebQQ、Gmail 等大量应用了复杂的 Javascript 运算的网站，不同的引擎最终的速度差异会相当大。

很多文章在报道说哪个浏览器更快，其实大部分说的就是JavaScript的渲染速度，而不是页面的载入速度。

在网速许可的情况下，其实各个浏览器的页面载入速度差别不大（Opera逊色一些）。

现在JavaScript在页面中的比重会越来越大，越来越多的动态页面开始大量借助JavaScript，比如现在主流的SNS、邮箱、网页游戏，所以JavaScript的渲染速度也是一个很重要的指标。

JavaScript的渲染速度越快，动态页面的展示也越快。Opera在JavaScript引擎的跑分上面一直都是很牛逼的，一般来说最新测试版之间PK，Opera基本都会夺冠。

引擎分类

1.老版本IE使用Jscript引擎，IE9之后使用Chakra引擎

2、SpiderMonkey / TraceMonkey / JaegerMonkey
SpiderMonkey应用在Mozilla Firefox 1.0-3.0，TraceMonkey应用在Mozilla Firefox 3.5-3.6版本，JaegerMonkey应用在Mozilla Firefox 4.0及后续的版本。

3、V8，用C++编写，开放源代码，由Google丹麦开发，是Google Chrome的一部分，用于Node.js，Chrome、傲游3。

4、JavaScriptCore，开放源代码，用于webkit型浏览器，如Safari ，2008年实现了编译器和字节码解释器，升级为了SquirrelFish。苹果内部代号为“Nitro”的JavaScript引擎也是基于JavaScriptCore引擎的。

5、Linear A/Linear B/Futhark/Carakan
Linear A应用于Opera 4.0-6.1版本
Linear B应用于Opera 7.0～9.2版本
Futhark应用于Opera 9.5-10.2版本
Carakan应用于Opera 10.5及后续的版本。

6、KJS，KDE的ECMAScript／JavaScript引擎，最初由哈里·波顿开发，用于KDE项目的Konqueror网页浏览器中。
JS引擎详解1
JS引擎详解2

扩展

1、IETab
这是一款浏览器扩展，并非内核。在没有第三方编译版本的时候，IETab一直是 Mozilla Firefox、Chrome等非Trident内核的浏览器的安装量最大的扩展之一，方便用户在不开启IE的情况下调用Trident内核访问一些兼容性比较差的网站。

2、Trident/Gecko双核浏览器
虽然IETab能实现部分需求，但是深度订制的毕竟还是不一样，所以Trident/Gecko双核浏览器就诞生了，Sleipnir、Avant 12（Orca）是这类里面比较常见的。Avant 12因为有Orca的前期积累，所以轻车熟路，后面还打算加入Chromium，变成三核浏览器，但是偏偏现在Mozilla Firefox和Chrome都在疯狂刷版本号，肯定有一部分精力要花在跟进版本上。

3、Trident/WebKit双核浏览器
现在国内最主流的“双核”浏览器基本都是这个架构，360极速浏览器、世界之窗浏览器极速版、傲游3搜狗浏览器3、QQ浏览器、枫树浏览器、快快浏览器、百度浏览器、阿云浏览器（后期版本）、太阳花浏览器，其中最奇葩的是傲游3。其它双核浏览器都是基于Chromium的，而傲游是基于WebKit的，但是偏偏又用的是V8引擎。

4、Trident/Gecko/WebKit三核浏览器
目前能见的应该就是日本的Lunascape，Avant增加了WebKit内核之后也会归类到这里。说实话，Lunascape真的很难用，真的很奇葩。各个内核相对独立，外壳本身不够强化，稳定性不高，所以还不如用回单核浏览器。