主流浏览器内核有哪几种？

1.背景介绍

什么是浏览器的内核？

浏览器最重要或者说最核心的部分叫做“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

2.它在浏览器中的作用是什么？

浏览器内核对于浏览器而言，是基础，是依托。如果没有了浏览器内核，那么浏览器是无法独立存在且产生作用的。它的存在，决定了网页的呈现的内容、格式以及效果。所以说，一个好的浏览器，一定是基于有一个稳定、高端、作用明显的浏览器内核的。

2.知识剖析

1.四大浏览器内核介绍

(1)Trident内核

(2)Gecko内核

(3)WebKit内核

(4)Blink内核

(1)TRIDENT内核

该内核程序在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内核的常见浏览器有：IIE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；以及国产浏览器中的兼容模式。

(2)GECKO内核

Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多，所以有时也会被称为Firefox内核。Gecko核心设计的相对成熟，在无法获取源码的情况下，开放程度仅次于IE。

(3)WEBKIT内核

Webkit:是苹果公司自主研发的内核，也是Safari浏览器使用的内核。 Webkit引擎包含渲染引擎WebCore和javascript引擎JSCore，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。Google Chrome、Opera及各种国产浏览器高速模式也使用Webkit作为内核。

(4)BLINK内核

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）中使用。

4.各浏览器及版本的市场份额

 

 

3.常见问题

为什么浏览器的兼容性是前端开发者所诟病的一个顽疾呢？

4.解决方案

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在上古时期，IE横行的年代，前端开发人员通过CSS hack技术达到想要的想过,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

JS方面：IE的早期版本对w3c标准的支持相当的不友好，以至于Chrome,FireFox的市场占有率与其平起平坐的时候，前端开发人员在写JS功能时不得不同时兼容2到3种浏览器，开发效率及其低下。<随之出现的>jQuery以良好的兼容性深得开发人员的追捧，成为一代神话。

如今，webkit内核的浏览器成为主流，开源化的内核得到了许多浏览器厂商的青睐，浏览器之间的兼容性问题也就不是什么问题了。

5.编码实战

如何在国产双核浏览器中强制使用webkit内核

 

6.扩展思考

在我们的日常开发过程中，是否还需要向下兼容其它浏览器，例如：ie8 ?

看业务需求，如果产品或者老板让代码向下兼容，就得写兼容代码

7.参考资料

1.http://www.jianshu.com/p/b6a893cc1b0c

2.http://gs.statcounter.com/

http://tongji.baidu.com/data/browser

1.FireFox和Chrome浏览器的js引擎各是什么？

主流浏览器 js引擎

IE -> Edge JScript（IE3.0-IE8.0） / Chakra（IE9+之后，查克拉，微软也看火影么..）

Chrome V8（大名鼎鼎）

Safari Nitro（4-）

Firefox SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）

Opera Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）

2.（浏览引擎哪家强）哪个引擎将会成为主流？

肯定是谷歌v8引擎

3.遇到过当高级浏览器之间的一些差异以及解决方法？

IE6双边距

行内属性设置了块级属性（display: block;）后，会产生双倍边距。

解决方案是在添加一个 display: inline; 或者 display: table;

双倍margin

浮动元素设置了margin在IE6下会产生双倍margin。

只要给浮动元素设置 display: inline;就可以了。或者说使用IE6的hack：_margin；

盒模型差异

IE盒模型：margin 、 content（包含border、padding）

W3C盒模型： margin 、border、 padding、 content

CSS3中的box-sizing的属性就是为了这两种模式，border-box（IE盒明星）和content-box（W3C）

img标签-图片存在边距

使用 vertical-align 属性可以清楚这种边距

顺便说下a标签同样会存在边距，具体的解决方法可以看看去除inline-block元素间间距的N种方法;

IE6 高度无法小于10px

添加overflow的属性

设置font-size的属性为高度的大小

js部分
获取属性

根据很多的人的反馈来看，无论是常规的获取自定义属性，或是jq的attr()在不同的环境下都是存在着些许兼容性问题，所以为了保险起见，最好是使用原生的getAttribute()来获取属性；

ID

在IE下，我们是可以通过document.idName来获取元素，但是Firefox是不允许的。

而且Firefox中我们使用与html对象ID相同的变量名，所以，获取元素最好使用document.getElementById(”idName”) 代替 document.idName，避免不必要的bug

input.type

IE下不允许修改input的类型，Firefox可以修改。尽量避免修改input的类型。