浏览器及浏览器内核

一个很巧合的机会，需要统计公司系统（当然我只需要关注我自己负责的系统）支持哪些浏览器，以及公司PMO的质量管理部门需要跟各块系统确定相应质量规范。是件好事情。

浏览器
常见浏览器
浏览器内核（渲染引擎）
Js引擎
浏览器兼容性的那些事儿

一、浏览器

什么是浏览器？即展示网页内容的一个“工具”或软件，包含文字、图片及其他信息，通常是通过URL获取及解析HTML及Js。

浏览器结构

浏览器的主要组件包含：

用户界面层：展示页面窗口及其他操作工具按钮和工具条。
浏览器引擎：用来查询和操作渲染引擎的接口。
渲染引擎：也称为排班引擎，用来显示请求的内容，包含HTML和CSS。我们一般习惯称之为“浏览器内核”。
网络层：用来完成网络调用。
UI后端层：用来绘制类似组合选择框及对话框等基本组件。
Js解释器：用来解释执行Js代码。
数据存储层：cookie等数据。

二、常见浏览器

以下仅列举一些比较常见的或熟识的浏览器稍作介绍，后面浏览器内核部分也会涉及一些所属内核的浏览器名称。

PC浏览器

** IE浏览器 **
微软IE因Windows操作系统占有不少的份额。
从IE7、IE8、IE9、IE10、IE11，版本碎片化比较大，之所以有这个说法，一是因为微软的Windows操作系统并行的用户不少，从XP、Vista、7、8、到10各个版本都有；二是因为IE几个版本的上下兼容性不好，需要花费不上的精力处理兼容性问题。
*2016年1月12日，微软公司宣布于这一天停止对IE 8/9/10三个版本的技术支持，用户将不会再收到任何来自微软官方的IE安全更新；作为替代方案，微软建议用户升级到IE 11或者改用Microsoft Edge浏览器。 *
目前（2016.10.30）在百度统计浏览器市场份近三个月的额数据中，IE市场份额排二，占27.22%。
** 谷歌Chrome浏览器 **
谷歌开发的Chrome浏览器，名称是来自于其称作Chrome的浏览器GUI（图形使用者界面）。特点是简洁、快速，也是Web开发者最喜欢使用的浏览器之一，很大原因是F12及大量的可用插件。
目前（2016.10.30）在百度统计浏览器市场份额近三个月的数据中，Chrome市场份额排首位，占38.02%。
** 火狐Firefox浏览器 **
火狐前身是网景（Netscape）旗下Mozilla项目的产品。曾与谷歌一度蜜月共赢，撬动IE霸主地位位列浏览器市场风云榜首。后来逐渐没落，
目前（2016.10.30）在百度统计浏览器市场份额近三个月的数据中，连名称都不能上榜（在“其他”的17.21%里面？）。
** 其他**
1. 搜狗浏览器
  搜狗浏览器势头极猛，九级加速体系、国内首款“真双核”浏览器。
  目前（2016.10.30）在百度统计浏览器市场份额近三个月的数据中，搜狗浏览器市场份额排在前五，占4.52%。
2. 猎豹浏览器
  采用双内核、智能切换。曾因猎豹浏览器抢票专版广为传播。
  目前（2016.10.30）在百度统计浏览器市场份额近三个月的数据中，搜狗浏览器市场份额排在前六，占2.48%。
3. 遨游浏览器
  遨游Maxthon浏览器基于IE内核，在IE内核基础上创新。曾经也是一款风头正劲的浏览器。

手机浏览器

** Safari浏览器 **
iOS苹果官方浏览器。
** UC浏览器 **
原名UCWEB，手机端占有量靠前的一款浏览器。

三、浏览器内核

现时主要的四大排版引擎为：Trident（应用于Internet Explorer）；Gecko（应用于Mozilla Firefox）；Blink（应用于Chrome ）；WebKit （应用于Apple Safari和早期版本的Google Chrome）。

** Trident（Windows） **(俗称IE内核)

Trident 就是大名鼎鼎的IE浏览器所使用的内核，也是很多浏览器所使用的内核，通常被称为IE内核。
老的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）。

基于Trident内核的浏览器非常多，这是因为Trident内核提供了丰富的调用接口。
其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”，用户可以来回切换。

猎豹安全浏览器（1.0-4.2版本为Trident+Webkit，4.3版本为Trident+Blink）
360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）
360极速浏览器（7.5之前为Trident+Webkit,7.5为Trident+Blink）
傲游浏览器（傲游1.x、2.x为IE内核，3.x为IE与Webkit双核）
百度浏览器（早期版本）
世界之窗浏览器[2] （最初为IE内核，2013年采用Chrome+IE内核）

2345浏览器、腾讯TT、淘宝浏览器
搜狗高速浏览器（1.x为Trident，2.0及以后版本为Trident+Webkit）
阿云浏览器（早期版本）、瑞星安全浏览器
闪游浏览器、海豚浏览器（iPhone/iPad/Android）
UC浏览器（Blink内核+Trident内核）

** Gecko（跨平台） **(俗称Firefox内核)

Netscape6 启用的内核，现在主要由Mozilla基金会进行维护，是开源的浏览器内核，目前最主流的Gecko内核浏览器是Mozilla Firefox，所以也常常称之为火狐内核。
Firefox的出现，逐步削弱了IE的霸主地位，Chrome的出现则是加速了这个进程。非Trident内核最直接的就是推动了编码的标准化，也使得微软在竞争压力下不得不改进IE。

基于Gecko的浏览器并不多见，常见的Gecko内核的浏览器：Mozilla Firefox、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon。

** KHTML（Linux） **

KDE开发的khtml为排版引擎即渲染引擎，kjs为js引擎。速度快捷、容错度低，符合GPL的自由软件。

常见的KHTML内核的浏览器：Konqueror。

** WebKit（跨平台） **(俗称Safari内核,Chrome内核原型,开源)

WebKit由KHTML发展而来，也是苹果给开源世界的一大贡献。是具有KHTML高速的特点，同样遵循W3C标准。

常见的WebKit内核的浏览器：Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器、Google Chrome。

** Presto（跨平台） **

Opera 所采用的内核，准确地说，是Opera 7.0及以后版本的内核，Opera 3.5-6.1版本使用的内核叫做Elektra。Presto对W3C标准的支持也是很良好的，Presto优先解析文字、保证可阅读性，媒体资源的渲染放后，这种渲染速度有待商榷。

常见的Presto内核的浏览器：Opera

** Blink（跨平台） **(Webkit WebCore组件分支,Google与Opera Software共同开发)

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google后来将这个渲染引擎作为Chromium计划的一部分、引入为开源引擎WebKit中WebCore组件的一个分支。（注：其实 Chromium 就是 WebKit，Chromium把WebKit的代码梳理得可读性提高很多。）

常见浏览器：Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器。

四、Js引擎

第一款JavaScript引擎由布兰登·艾克在网景公司开发，用于Netscape Navigator网页浏览器中。引擎的名字叫做SpiderMonkey，由C实现。它自JavaScript 1.5升级以符合ECMA-262 版本3。Rhino引擎，由网景公司的Norris Boyd开发，由Java实现。像SpiderMonkey一样，Rhino符合ECMA-262 版本3。JavaScript引擎的应用例子还包括： Apple Safari 4的Nitro，Google Chrome的V8和 Mozilla Firefox 3.5的TraceMonkey。

主要的网页浏览器JavaScript引擎：

** Mozilla **
1、SpiderMonkey，第一款JavaScript引擎，由Brendan Eich在Netscape Communications时编写，用于Mozilla Firefox 1.0～3.0版本。
2、Rhino，由Mozilla基金会管理，开放源代码，完全以Java编写。
T3、raceMonkey，基于实时编译的引擎，其中部份代码取自Tamarin引擎，用于Mozilla Firefox 3.5～3.6版本。
4、JaegerMonkey，德文Jäger原意为猎人，结合追踪和组合码技术大幅提高性能，部分技术借凿了V8、JavaScriptCore、WebKit，用于Mozilla Firefox 4.0以上版本。
5、IonMonkey，可以对JavaScript编译后的结果进行优化，用于Mozilla Firefox 18.0以上版本。
6、OdinMonkey，可以对asm.js进行优化，用于Mozilla Firefox 22.0以上版本。
** Google **
V8，开放源代码，由Google丹麦开发，是Google Chrome的一部分。
** 微软 **
Chakra (JScript引擎)，中文译名为查克拉，用于Internet Explorer 9的32位版本及Internet Explorer 10。
** Opera **
1、Linear A，用于Opera 4.0～6.1版本。
2、Linear B，用于Opera 7.0～9.2版本。
3、Futhark，用于Opera 9.5～10.2版本。
4、Carakan，由Opera软件公司编写，自Opera10.50版本开始使用。
** 其它 **
1、KJS，KDE的ECMAScript/JavaScript引擎，最初由Harri Porten开发，用于KDE项目的Konqueror网页浏览器中。
2、Narcissus，开放源代码，由Brendan Eich编写（他也参与编写了第一个SpiderMonkey）。
3、Tamarin，由Adobe Labs编写，Flash Player 9所使用的引擎。
Nitro（原名SquirrelFish），为Safari 4编写。

五、浏览器兼容性的那些事儿

前文中简述了浏览器结构，而浏览器兼容性问题，跟其中的几个关键组件相关：

浏览器内核（即渲染引擎）
Js引擎

前面已经介绍过，Firefox浏览器使用Gecko、Safari跟Chrome（后来Opera跟进）使用Webkit。
渲染引擎一般的基本渲染过程为：

解析HTML文档转换为DOM树
解析CSS渲染树（用于渲染DOM树，包含带有颜色、尺寸等显示属性的顺序矩形）
对渲染树的每个节点进行布局处理
遍历渲染树并用UI后端层将每一个节点绘制出来

以上渲染过程只是渲染引擎的一般处理过程，而每种不同的渲染引擎的具体步骤可能有所不同。
Js引擎，也存在不同的兼容性问题。
总得来说，浏览器网页的兼容性问题，需要留意以下几个层面：
- HTML标准：不同的浏览器或浏览器版本，可能会遵循自己的Web（HTML）标准，或者适用于不同的HTML标准（如HTML 1，2等）。需要衡量、选择可支持的浏览器、或浏览器版本，或者采取响应式/通用框架来做适配。
- CSS标准：不同的浏览器解析CSS都有一点出入，特别是padding、line-height这些要细微控制的地方。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。（这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。）
- Js标准：某些Js方法在不同浏览器下是不兼容的，
- 屏幕尺寸：不同尺寸需要进行处理。
- 移动端（手机/平板）兼容：不同机型需要处理。

六、参考

浏览器内部工作原理（2012）
http://kb.cnblogs.com/page/129756/
浏览器
http://baike.baidu.com/
浏览器内核
http://developer.51cto.com/art/201311/418106.htm
http://www.cnblogs.com/xiyangbaixue/archive/2014/10/22/4042548.html
http://www.jianshu.com/p/df97d3b866d5
https://www.douban.com/note/480312756/
H5 test
http://html5test.com/
5、兼容性
http://blog.csdn.net/qq_21342217/article/details/48314083