浏览器及浏览器内核

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

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

一、浏览器

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

浏览器结构

浏览器的主要组件包含:

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

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

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

六、参考

  1. 浏览器内部工作原理(2012)
    http://kb.cnblogs.com/page/129756/
  2. 浏览器
    http://baike.baidu.com/
  3. 浏览器内核
    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/
  4. H5 test
    http://html5test.com/
    5、兼容性
    http://blog.csdn.net/qq_21342217/article/details/48314083
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容