四大内核与五大浏览器

四大内核与五大浏览器

一.简介

浏览器最重要的部分是浏览器的内核,浏览器内核是浏览器的核心,也称之为"渲染引擎",用来解释网页语法并渲染到页面上,浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息,不同的浏览器内核对网页的语法解释也不同,因此网页开发者需要在不同的内核的浏览器中测试网页渲染效果.

二.浏览器内核组成

浏览器内核可以分为两个部分:

(1) 渲染引擎

(2) JS引擎

内核负责取得网页的内容(HTML,XML,图像等等),整理讯息(比如j加入CSS),以及计算网页的显示方式,然后输出到显示器或打印机.

浏览器内核的不同对于网页的语法解释也会有不同,所以渲染效果也不相同.所有网页浏览器,电子邮箱客户端,以及其它需要编辑,显示网络内容的应用程序都需要内核.JS引擎则是解析JavaScript语言,执行JavaScript语言来实现网页的动态效果.

最开始渲染引擎和jS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎.

三.四大内核

内核种类很多,但常见的浏览器内核有四种:Trident,Gecko,Blink,Webkit

1.Trident

IE的内核,也就是国内双核浏览器的内核之一,此内核只能用于windows平台,且不是开源的.Trident内核一直延续到IE11,IE11的后继者Edge采用了新的内核EdgeHTML

2.Gecko

开源内核,后来被FireFox采用,最大的优势是跨平台,在Windows,Linux,MacOs等主要操作系统中使用

3.Webkit

开源内核,Webkit最先使用的其实是Safari,苹果的浏览器,后来Chrome将WebKit内核推向高潮,曾经的Chrome用的就是WebKit

PS:WebKit其实包括是渲染引擎WebCore(前身是KHTML),以及JS引擎JSCore

Safari浏览器内核:WebKit内核 KHTML=>WebKit(WebCore+JSCore)=>WebKit2

4.Chromium/Blink

开源内核,Chromium 其实是WebKit的一个分支,代码可读性,和编译速度得到提升,并且谷歌专门研发的自己的JS-V8引擎,极大的提高了JS的运算速度

Blink其实是WebKit的分支,如同WebKit是KHTML的分支.

Blink内核是有Google和Opera Software共同研发,目前Chrome内核是Blink

Chromium内核=>WebKit内核=>Blink内核

5.Presto(淘汰)

Presto是Opera Software(欧朋软件)开发的浏览器引擎,它是世界上公认最快的渲染速度的引擎.后来Opera放弃了Presto加入谷歌的阵营,采用Chromium,之后也采用Blink

四.五大浏览器

1.IE浏览器

IE是微软旗下浏览器,是目前国内用户量最多的浏览器

2.Opera浏览器

Opera是挪威欧朋软件公司旗下的浏览器.Opera之前使用的是Presto内核,后来使用Blink内核

3.Safari浏览器

Safari是苹果公司的浏览器,最早使用webkit内核的浏览器,也是现在苹果默认的浏览器

4.Firefox浏览器

Firefox是Mozilla公司旗下的浏览器,Firefox采用Gecko作为内核

5.Chrome浏览器

Chrome是Google旗下的浏览器,最开始采用的是Webkit作为浏览器内核,后来采用Webkit的分支Blink作为内核

五.浏览器前缀兼容写法

1.-ms-

一般使用Trident内核的,需要添加这个前缀,比如IE浏览器,或者使用IE内核的

2.-moz-

典型代表是火狐浏览器(Mozilla),使用Gecko内核的,也就是Firefox内核

3.-o-

早期的时候,使用Opera浏览器的,现在不需要了

4.-webkit-

典型的2个浏览器,Safari和谷歌浏览器等使用Webkit作为内核的

5.需要添加前缀的属性

属性	描述
@keyframes 规则	定义动画的规则
transition-property	移动和变换属性
transition-duration	移动和变换属性
transition-timing-function	移动和变换属性
transition-delay	移动和变换属性
animation-name	动画属性
animation-duration	动画属性
animation-timing-function	动画属性
animation-delay	动画属性
border-radius	圆角边框
box-shadow	阴影
backface-visibility	隐藏元素的背面,在元素旋转时,背面不可见可使用这属性
column属性	列属性
flex属性	弹性盒
perspective属性	3D元素

六.总结

浏览器	内核	描述
IE浏览器	Trident	俗称IE内核
Chrome浏览器	Webkit=>Blink	统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核
Firefox浏览器	Gecko	俗称Firefox内核
Opera	Presto=>Webkit=>Blink	最初是自己的Presto内核,后来是Webkit,现在是Blink内核
360浏览器,猎豹浏览器	IE+Chrome双内核	双内核浏览器
搜狗,遨游,QQ	Trident+Webkit	Trident(兼容模式)+Webkit(高速模式)
百度,世界之窗	IE内核	Trident
2345浏览器内核	IE+Chrome	以前是IE内核,现在是IE+Chrome