主流浏览器内核、js引擎、渲染方式
目录
一、总结：
1、主流浏览器内核及其js引擎
| 浏览器 | 内核 | js引擎 |
|---|---|---|
| IE | Trident内核 | JScript |
| Firefox(火狐) | Gecko内核，俗称Firefox内核 |
FireFox3.0及其以下：SpiderMonkey FireFox3.1及其以上：TraceMonkey |
| Google Chrome(谷歌) | Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核 | V8 |
| Safari(苹果) | Webkit内核； |
Safari3.1及其以下：JavaScriptCore， safari4.0：SquirrelFish |
| Opera(欧朋) | 最初是自己的Presto内核，后来是Webkit，现在是Blink内核； | opera9.5及其以上：Futhark |
其他：
- 360浏览器、猎豹浏览器内核：IE+Chrome双内核；
- 搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
- 百度浏览器、世界之窗内核：IE内核；
- 2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
2、浏览器如何渲染页面
第一步.DOM构造
$.HTML解析出DOM树(DOM Tree):
浏览器首先将收到的HTML代码，通过html解析器解析构建一颗DOM树(DOM Tree)
$.CSS解析出样式表规则(Style Rules)，也叫做CSSOM(CSS Object Model)
浏览器将接受到的css代码，通过css解析器构建出样式表规则(Style Rules)
$.将二者关联生成渲染树(Render Tree)
将这些规则分别放到对应的DOM树节点上，得到一颗渲染树(Render Tree)---带有样式属性的DOM树
第二步.布局
浏览器按从上到下，从左到右的顺序，计算和读取Render Tree每个节点信息。将树上的节点压入文档流然后布局。
第三步.绘制页面
Painting 根据计算好的信息绘制整个页面
二、详解
所谓的“浏览器内核”无非指的是一个浏览器最核心的部分——“Rendering Engine”，直译这个词汇叫做“渲染引擎”，不过我们也常称其为“排版引擎”、“解释引擎”。这个引擎的作用是帮助浏览器来渲染网页的内容，将页面内容和排版代码转换为用户所见的视图。
注：有时候我们所说的“浏览器内核”甚至“渲染引擎”，其实除了渲染引擎，也悄悄包含了javascript引擎，如WebKit，它由渲染引擎WebCore和javascript引擎JSCore组成。
不同的内核对网页编写语法的解释也有不同，进而导致同一个页面在不同内核的浏览器下显示出来的效果也会有所出入，这也是前端工程师需要让作品兼容各种浏览器的原因。
我们常常喜欢把浏览器内核与某浏览器名称直接挂钩起来，如IE内核、Chrome内核，其实是不全面的说法。比如Opera在7.0版本到12.16版本中采用的是独立研发的Presto引擎，但在后续跟随了Chrome的脚步加入了WebKit大本营，放弃了Presto；另外即使名称相同，但版本不同的引擎也可能存在较大差别。比如IE6使用的是Trident早期版本，存在许多bug，性能也较低。而最新的IE11所使用的Trident7.0版本已经可以支持WebGL（3D绘图标准）以及HTML5大部分标准。
下面按照各个主流浏览器，介绍下它们所使用的浏览器内核的历程。
三、Internet Explorer：
1、简介
它采用的排版引擎(俗称内核)为Trident。
2、js引擎
Chakra：中文译名为查克拉，用于Internet Explorer 9的32位版本及IE10+。
四、Safari
1、简介
Safari是苹果公司开发的浏览器，使用了KDE（Linux桌面系统）的KHTML作为浏览器的运算核心，Safari所用浏览器内核的名称是大名鼎鼎的WebKit。
需要了解的是，虽然我们称WebKit为浏览器内核（或浏览器引擎），但不太适合直接称之为我们开头提到的Rendering Engine（渲染引擎），因为WebKit本身主要是由两个引擎构成的，一个正是渲染引擎“WebCore”，另一个则是javascript解释引擎“JSCore”，它们均是从KDE的渲染引擎KHTML及javascript解释引擎KJS衍生而来。
在2010年4月，苹果公司宣布了其浏览器引擎Webkit的最新项目 Webkit2。Webkit2的目标是实现独立进程与非阻断式API。
2、js引擎
五、Chrome / Chromium
1、简介
谷歌Chrome/Chromium浏览器从08年创始至今一直使用苹果公司的WebKit作为浏览器内核原型，是WebKit的一个分支，我们可以称之为Chromium引擎（注意我们这里说的是Chromium引擎，而不是Chromium浏览器）。
chrome和Chromium两个浏览器的区别：
Chromium浏览器是谷歌为发展自家的浏览器Chrome而开启的计划，所以Chromium相当于Chrome的工程版或称实验版，新功能会率先在Chromium上实现，待验证后才会应用在Chrome上。
Chrome总共有四个更新分支：Canary、Dev、Beta、Stable，稳定性依次增强。
13年发布的Chrome 28.0.1469.0版本开始，Chrome放弃Chromium引擎转而使用最新的Blink引擎（基于WebKit2——苹果公司于2010年推出的新的WebKit引擎），Blink对比上一代的引擎精简了代码、改善了DOM框架，也提升了安全性。
2、js引擎
V8：开源，由Google丹麦开发，是Google Chrome的一部分。
注：我们上面提到Chrome是基于WebKit的分支，而WebKit又由渲染引擎“WebCore”和JS解释引擎“JSCore”组成，可能会让你搞不清V8和JSCore的关系。你可以这样理解——WebKit是一块主板，JSCore是一块可拆卸的内存条，谷歌实际上认为Webkit中的JSCore不够好，才自己搞了一个V8 JS引擎，这就是Chrome比Safari在某些JS测试中效率更高的原因。
六、Opera
1、简介
Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。
Opera在2013年2月宣布放弃Presto，转而跟随Chrome使用WebKit分支的Chromium引擎作为自家浏览器核心引擎。
在Chrome与2013年推出Blink引擎（也是基于WebKit的分支）之后，Opera也紧跟其脚步表示将转而使用Blink作为浏览器核心引擎。
2、js引擎
- Linear A：用于Opera 4.0～6.1版本。
- Linear B：用于Opera 7.0～9.2版本。
- Futhark：用于Opera 9.5～10.2版本。
- Carakan：由Opera软件公司编写，自Opera10.50版本开始使用。
七、Firefox
1、简介
ozilla Firefox是一个开源网页浏览器，原名是Firebird，2004年2月9日，Mozilla Firebird决定改称Mozilla Firefox。
2、js引擎
- SpiderMonkey：第一款JavaScript引擎，由Brendan Eich在Netscape Communications时编写，用于Mozilla Firefox 1.0～3.0版本。
- Rhino：由Mozilla基金会管理，开放源代码，完全以Java编写。
- TraceMonkey：基于实时编译的引擎，其中部份代码取自Tamarin引擎，用于Mozilla Firefox 3.5～3.6版本。
- JaegerMonkey：德文Jäger原意为猎人，结合追踪和组合码技术大幅提高性能，部分技术借凿了V8、JavaScriptCore、WebKit：用于Mozilla Firefox 4.0以上版本。
- IonMonkey：可以对JavaScript编译后的结果进行优化，用于Mozilla Firefox 18.0以上版本。
- OdinMonkey：可以对asm.js进行优化，用于Mozilla Firefox 22.0以上版本。
其它js引擎：
KJS：KDE的ECMAScript/JavaScript引擎，最初由Harri Porten开发，用于KDE项目的Konqueror网页浏览器中。
Narcissus：开放源代码，由Brendan Eich编写（他也参与编写了第一个SpiderMonkey）。
Tamarin：由Adobe Labs编写，Flash Player 9所使用的引擎。
Nitro（原名SquirrelFish）：为Safari 4编写。