一个很巧合的机会,需要统计公司系统(当然我只需要关注我自己负责的系统)支持哪些浏览器,以及公司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%里面?)。-
** 其他**
- 搜狗浏览器
搜狗浏览器势头极猛,九级加速体系、国内首款“真双核”浏览器。
目前(2016.10.30)在百度统计浏览器市场份额近三个月的数据中,搜狗浏览器市场份额排在前五,占4.52%。 - 猎豹浏览器
采用双内核、智能切换。曾因猎豹浏览器抢票专版广为传播。
目前(2016.10.30)在百度统计浏览器市场份额近三个月的数据中,搜狗浏览器市场份额排在前六,占2.48%。 - 遨游浏览器
遨游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