+ - [3.1 Trident](#31_Trident_37)
- [3.2 Gecko](#32_Gecko_50)
- [3.3 Webkit](#33_Webkit_55)
- [3.4 Chromium/Blink](#34_ChromiumBlink_66)
- [3.5 Presto](#35_Presto_97)
+ [四、关于移动端](#_112)
+ [五、总结](#_117)
+ [六、拓展阅读](#_120)
一、前言
用户在使用浏览器访问互联网页面时,看到的仅仅只是浏览器本身,却很少能看到浏览器最核心的部分—浏览器内核。从第一款libwww(Library WorldWideWeb)浏览器发展至今已经经历了无数竞争与淘汰了。现在国内常见的浏览器有:IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。但目前最为主流浏览器有五大款,分别是IE、Firefox、Google Chrome、Safari、Opera。
浏览器最重要的部分是浏览器内核。浏览器内核是浏览器的核心,也称“渲染引擎”,用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同,因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。
浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。渲染引擎负责取得网页内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器内核不同对于网页的语法解释会有不同,所以渲染效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。
最开始,渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有 10 多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。
二、五大浏览器
2.1 IE浏览器
IE是微软公司旗下浏览器,是目前国内用户量最多的浏览器。IE诞生于1994年,当时微软为了对抗市场份额占据将近百分之九十的网景Netscape Navigator,于是在Windows中开发了自己的浏览器Internet Explorer,自此也引发了第一次浏览器大战。结果可想而知,微软大获全胜,网景不得不将自己卖给AOL公司。但实际上事情并没有结束,网景后来开发了风靡一时的Firefox火狐,至今Firefox也成为世界五大浏览器之一。
1996年,微软从Spyglass手里拿到Spyglass Mosaic的源代码和授权,开始开发自己的浏览器IE。后来,微软以IE和Windows捆绑的模式不断向市场扩展份额,使IE成为市场的绝对主流。现在装了Windows系统的电脑基本无法卸载IE。
2.2 Opera浏览器
Opera是挪威Opera Software ASA公司旗下的浏览器。1995年,opera公司发布第一版Opera浏览器,使用自己研发的Presto内核。当时opera公司的开发团队不断完善Presto内核,使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器,从此也丢弃了强大的Presto内核,改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。
2.3 Safari浏览器
第二次浏览器大战是从苹果公司发布Safari浏览器开始的。2003年,苹果公司在苹果手机上开发Safari浏览器,利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。Safari是最早使用webkit内核的浏览器,也是现在苹果默认的浏览器。
2.4 Firefox浏览器
Firefox浏览器是Mozilla公司旗下浏览器,也是刚才提到的网景公司后来的浏览器。网景被收购后,网景人员创办了Mozilla基金会,这是一个非盈利组织,他们在2004年推出自己的浏览器Firefox。Firefox采用Gecko作为内核。Gecko是一个开源的项目,代码完全公开,因此受到很多人的青睐。Firefox的问世加快了第二次浏览器大战的开始。第二次浏览器大战与第一次二元鼎力的局面不同,这一次的特点就是百家争鸣,也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。
2.5 Chrome浏览器
Chrome浏览器是google旗下的浏览器。Chrome浏览器自发布以来一直讲究简洁、快速、安全,所以Chrome浏览器到现在一直受人追捧。最开始Chrome采用webkit作为浏览器内核,直到2013年,google宣布不再使用苹果的webkit内核,开始使用webkit的分支内核Blink。
三、四大内核
以上是五大浏览器的简介,接下来是四大内核。四大内核分别是:Trident(也称IE内核)、webkit、Blink、Gecko。五大浏览器采用的都是单内核,而随着浏览器的发展,现在也出现了双内核浏览器。像360浏览器、QQ浏览器都是采用双内核。
作为前端开发,熟悉四大内核是非常有必要的。四大内核的解析不同使网页渲染效果更具多样化。下面总结一下各常用浏览器所使用的内核。
- IE浏览器内核:Trident内核,也是俗称的IE内核;
- Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
- Firefox浏览器内核:Mozilla的Gecko内核,俗称Firefox内核;
- Safari浏览器(MacOS)内核:Webkit内核;
- Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
- 360浏览器、猎豹浏览器内核:IE+Chrome双内核;
- 搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
- 百度浏览器、世界之窗内核:IE内核;
- 2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;
3.1 Trident
Trident(IE内核):该内核程序在 1997 年的 IE4 中首次被采用,是微软在 Mosaic(“马赛克”,这是人类历史上第一个浏览器,从此网页可以在图形界面的窗口浏览) 代码的基础之上修改而来的,并沿用到 IE11,也被普遍称作 “IE内核”。
Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用 IE 内核而非 IE 的浏览器(壳浏览器)涌现。由于 IE 本身的 “垄断性”(虽然名义上 IE 并非垄断,但实际上,特别是从 Windows 95 年代一直到 XP 初期,就市场占有率来说 IE 的确借助 Windows 的东风处于 “垄断” 的地位)而使得 Trident 内核的长期一家独大,微软很长时间都并没有更新 Trident 内核,这导致了两个后果——一是 Trident 内核曾经几乎与 W3C 标准脱节(2005年),二是 Trident 内核的大量 Bug 等安全性问题没有得到及时解决,然后加上一些致力于开源的开发者和一些学者们公开发表 IE 浏览器不安全的观点,使得大量用户转向了其他浏览器,Firefox 和 Opera 就是这个时候兴起的。非 Trident 内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非 IE浏览器的浏览效果问题。
补充:IE 从版本 11 开始,初步支持 WebGL 技术。IE8 的 JavaScript 引擎是 Jscript,IE9 开始用 Chakra,这两个版本区别很大,Chakra 无论是速度和标准化方面都很出色。
国内很多的双核浏览器的其中一核便是 Trident,美其名曰 “兼容模式”。
Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。关于 Edge 浏览器更多可以参考《 如何评价 Microsoft Edge 浏览器? 》以及《 微软开源Edge的JS引擎ChakraCore》。
关于 IE 的历史,推荐这篇文章《 激荡20年:IE浏览器的辉煌与落寞》。
3.2 Gecko
Gecko(Firefox 内核):Netscape6 开始采用的内核,后来的 Mozilla FireFox(火狐浏览器) 也采用了该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。因为这是个开源内核,因此受到许多人的青睐,Gecko 内核的浏览器也很多,这也是 Gecko 内核虽然年轻但市场占有率能够迅速提高的重要原因。
事实上,Gecko 引擎的由来跟 IE 不无关系,前面说过 IE 没有使用 W3C 的标准,这导致了微软内部一些开发人员的不满;他们与当时已经停止更新了的 Netscape 的一些员工一起创办了 Mozilla,以当时的 Mosaic 内核为基础重新编写内核,于是开发出了 Gecko。不过事实上,Gecko 内核的浏览器仍然还是 Firefox (火狐) 用户最多,所以有时也会被称为 Firefox 内核。此外 Gecko 也是一个跨平台内核,可以在Windows、 BSD、Linux 和 Mac OS X 中使用。
3.3 Webkit
一提到 webkit,首先想到的便是 chrome,可以说,chrome 将 Webkit内核深入人心,殊不知,Webkit 的鼻祖其实是 Safari。现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了),苹果都哭瞎了有木有。
Safari 是苹果公司开发的浏览器,使用了KDE(Linux桌面系统)的 KHTML 作为浏览器的内核,Safari 所用浏览器内核的名称是大名鼎鼎的 WebKit。 Safari 在 2003 年 1 月 7 日首度发行测试版,并成为 Mac OS X v10.3 与之后版本的默认浏览器,也成为苹果其它系列产品的指定浏览器(也已支持 Windows 平台)。
如上述可知,WebKit 前身是 KDE 小组的 KHTML 引擎(HTML排版引擎),可以说 WebKit 是 KHTML 的一个开源的分支。当年苹果在比较了 Gecko 和 KHTML 后,选择了后者来做引擎开发,是因为 KHTML 拥有清晰的源码结构和极快的渲染速度。
Webkit内核可以说是以硬件盈利为主的苹果公司给软件行业的最大贡献之一。随后,2008 年谷歌公司发布 chrome 浏览器,采用的 chromium 内核便 fork 了 Webkit。
PS:Apple 在 Safari 里面使用了自己的 Nitro JavaScript 引擎(只用 WebKit 来渲染 HTML),所以一般说到 Webkit,通常指的就是渲染引擎(而不包括 Javascript 引擎)
3.4 Chromium/Blink
2008 年,谷歌公司发布了 chrome 浏览器,浏览器使用的内核被命名为 chromium。
chromium fork 自开源引擎 webkit,却把 WebKit 的代码梳理得可读性提高很多,所以以前可能需要一天进行编译的代码,现在只要两个小时就能搞定。因此 Chromium 引擎和其它基于 WebKit 的引擎所渲染页面的效果也是有出入的。所以有些地方会把 chromium 引擎和 webkit 区分开来单独介绍,而有的文章把 chromium 归入 webkit 引擎中,都是有一定道理的。
谷歌公司还研发了自己的 Javascript 引擎,V8,极大地提高了 Javascript 的运算速度。
chromium 问世后,带动了国产浏览器行业的发展。一些基于 chromium 的单核,双核浏览器如雨后春笋般拔地而起,例如 搜狗、360、QQ浏览器等等,无一不是套着不同的外壳用着相同的内核。
然而 2013 年 4 月 3 日,谷歌在 Chromium Blog 上发表 博客,称将与苹果的开源浏览器核心 Webkit 分道扬镳,在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。
webkit 用的好好的,为何要投入到一个新的内核中去呢?
Blink 其实是 WebKit 的分支,如同 WebKit 是 KHTML 的分支。 Google 的 Chromium 项目此前一直使用 WebKit(WebCore) 作为渲染引擎,但出于某种原因,并没有将其多进程架构移植入Webkit。
后来,由于苹果推出的 WebKit2 与 Chromium 的沙箱设计存在冲突,所以 Chromium 一直停留在 WebKit,并使用移植的方式来实现和主线 WebKit2 的对接。这增加了 Chromium 的复杂性,且在一定程度上影响了 Chromium 的架构移植工作。
基于以上原因,Google 决定从 WebKit 衍生出自己的 Blink 引擎(后由 Google 和 Opera Software 共同研发),将在 WebKit 代码的基础上研发更加快速和简约的渲染引擎,并逐步脱离 WebKit 的影响,创造一个完全独立的 Blink 引擎。这样以来,唯一一条维系 Google 和苹果之间技术关系的纽带就这样被切断了。
Google 和苹果在多个领域都是竞争对手,而唯独在浏览器引擎上有技术合作,利益一致。但为了各自的利益,谁都不会拿出 100% 的 “诚意” 来做好 WebKit,因为你做出来的成果竞争对手可以直接享用。移动互联网已经崛起,手机和平板设备端必将成为浏览器的另一个战场。这个时候,如果 Google 跟苹果仍然黏在一起,将会严重阻碍双方的进步,也会阻碍 WebKit 的进步。
据说 Blink 删除了 880w 行 webkit 代码。
至于为什么叫 blink?有兴趣的可以看下这篇访谈《 Paul Irish on Chrome Moving to Blink》,里面说
it fits that Blink will never support the infamous.
最后
中年危机是真实存在的,即便有技术傍身,还是难免对自己的生存能力产生质疑和焦虑,这些年职业发展,一直在寻求消除焦虑的依靠。
-
技术要深入到什么程度?
-
做久了技术总要转型管理?
-
我能做什么,我想做什么?
-
一技之长,就是深耕你的专业技能,你的专业技术。(重点)
-
独立做事,当你的一技之长达到一定深度的时候,需要开始思考如何独立做事。(创业)
-
拥有事业,选择一份使命,带领团队实现它。(创业)
一技之长分五个层次
-
栈内技术 - 是指你的前端专业领域技术
-
栈外技术 - 是指栈内技术的上下游,领域外的相关专业知识
-
工程经验 - 是建设专业技术体系的“解决方案”
-
带人做事 - 是对团队协作能力的要求
-
业界发声 - 工作经验总结对外分享,与他人交流
永远不要放弃一技之长,它值得你长期
信仰持有。
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue 等等。