前端常见浏览器的内核

一、问题及原因

在制作前端网页开发的朋友经常会遇到这样的问题：同样的前端代码在不同浏览器上运行时，展示出来的效果却不同。

出现这种问题的原因是：不同浏览器的内核不同，导致不同浏览器对页面的解析存在一定的差异。这种问题也被业界常称为：浏览器兼容性问题。

二、浏览器内核

浏览器内核简要说明
一个完整的浏览器包含浏览器内核和浏览器的外壳（shell）。浏览器内核又可以分为两部分：渲染引擎（Layout Engine或Rendering Engine）和JS引擎。由于JS引擎越来越独立，内核就倾向于只指渲染引擎。

三、浏览器构成

浏览器一般由七个模块组成，User Interface（用户界面）、Browser engine（浏览器引擎）、Rendering engine（渲染引擎）、Networking（网络）、JavaScript Interprete（js解释器）、UI Backend（UI 后端）、Date Persistence（数据持久化存储）

1. 用户界面( User Interface) －包括地址栏、后退/前进按钮、书签目录等，也就是你-所看到的除了页面显示窗口之外的其他部分
2.浏览器引擎(Browser engine)－也称浏览器内核。可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心
3.渲染引擎 (Rendering engine)－解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。
4.网络 (Networking)－用来完成网络调用或资源下载的模块
5.UI 后端 (UI Backend)－用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。
6.JS解释器(JavaScript Interprete) －也称JS引擎。用来解释执行JS脚本的模块，如chrome的V8引擎、JavaScriptCore
7.数据存储 (Date Persistence)－浏览器在硬盘中保存 cookie、localStorage等各种数据，可通过浏览器引擎提供的API进行调用。HTML5新增了web database技术，一种完整的轻量级客户端存储技术。

浏览器的主要部分示意图：

• 1.用户界面
• 2.浏览器引擎(负责窗口管理、Tab进程管理等)
• 3.渲染引擎(也叫内核，负责HTML解析、页面渲染)
• 4.JS引擎(JS解释器，如Chrome和Nodejs采用的V8)

四、主流浏览器的内核（渲染引擎）和JS引擎

5大内核和浏览器：

渲染引擎	浏览器
Trident内核	IE浏览器采用，也常称IE内核。  除此之外，采用Trident内核的浏览器还有：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）； 360安全浏览器、360极速浏览器（采用Chrome+IE内核）、遨游浏览器（傲游1.x、2.x为IE内核，3.x为IE与Webkit双核）、百度浏览器（早期版本）、世界之窗浏览器（最初为IE内核，2013年采用Chrome+IE内核）、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗浏览器、阿云浏览器（早期版本）、瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器（12 之前版本）、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、UC浏览器（Blink内核+Trident内核） 等
	备注：以上其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”，用户可以来回切换。Trident内核无法在Windows系统之外的其他操作系统上使用，因此它不能跨平台使用。
Gecko内核	Mozilla FireFox采用，也称为火狐内核。除此之外，采用Gecko内核的浏览器还有：Mozilla Firefox、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon
	备注：Gecko的特点是代码完全公开（开源内核）。因此任何程序员都可以为其编写代码，增加功能。并且，Gecko是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用。
Presto内核	Opera浏览器的前内核（Opera12.17及更早版本使用该内核）Opera现已改用Google Chrome的Blink内核。目前该内核在Opera中已经停止开发并废弃。Presto是商业引擎，除了Opera以外，只剩下NDS Browser、WiiInternet Channle、Nokia770网络浏览器等
	备注：该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。
Webkit内核	Safari浏览器内核，Chrome内核原型，开源。Google Chrome、360极速浏览器以及搜狗浏览器的高速模式也使用web kit作为内核(在脚本理解方面，Chrome使用自己研发的V8引擎)。Web Kit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的iPhone， Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 Web Kit。 WebKit内核常见的浏览器：遨游浏览器3、Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，
	备注：它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。限于Mac OS X的使用不广泛和Safari浏览器曾经只是Mac OS X专属浏览器，市场范围不大，但Safari 3推出了Windows版，目前人气上升。
Blink内核	Google的最新内核。除此之外，在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。
	备注：苹果在Safari中采用Web kit核心，并于2005年将Web kit公开为开源软件。谷歌当时采用苹果的Web kit核心打造了Chrome浏览器。并与Opera Software开发出Blink内核。2013年4月3日，谷歌在Chromium Blog上发表博客，称将与苹果的开源浏览器核心Webkit分道扬镳，在Chromium项目中研发Blink渲染引擎（即浏览器核心），内置于Chorme浏览器之中。

JS引擎与浏览器：
 

浏览器	JS引擎
IE	Chakra
Edge	Chakra
Firefox	SpiderMonkey
Chrome	V8（著名的）
Safari	Javascriptcore
Opera	Carakan