内核原理和兼容性

一、浏览器内核
要搞清楚浏览器内核是什么，首先应该先搞清楚浏览器的构成。

简单来说浏览器可以分为两部分，shell+内核。

其中shell的种类相对比较多，内核则比较少。

Shell是指浏览器的外壳：例如菜单，工具栏等。

主要是提供给用户界面操作，参数设置等等。

它是调用内核来实现各种功能的。

内核才是浏览器的核心。

内核是基于标记语言显示内容的程序或模块。

也有一些浏览器并不区分外壳和内核。

从Mozilla将Gecko独立出来后，才有了外壳和内核的明确划分。

1.什么是浏览器内核
浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。

它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。

浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

（JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。

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

1)常见的浏览器内核
●Trident（又称为MSHTML），是微软的视窗操作系统（Windows）搭载的网页浏
览器—Internet Explorer的页面渲染引擎的名称，目前是互联网上最流行的
排版引擎。

●Gecko是套开放源代码的、以C++编写的页面渲染引擎。

Gecko是跨平台的，能
在Microsoft Windows、Linux和Mac OS X等主要操作系统上运行。

它是最流
行的页面渲染引擎之一，其流行程度仅次于Trident。

●Webkit是苹果公司基于KHTML开发的。

他包括Webcore和JavaScriptCore
（SquirrelFish,V8）两个引擎。

●Presto由Opera Software公司开始的，用于Opera的渲染引擎。

Macromedia
Dreamweaver （MX版本及以上）和Adobe Creative Suite 2也使用了Presto
的内核。

2)JS引擎
JavaScript最初由网景公司的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。

以它为基础，制定了ECMAScript标准。

他的起源并不是如《Javascript高级程序设计》书中所述，是Brendan Eich自主发明的。

（参考aimingoo的考证文章）JavaScript在浏览器的实现中还必须含有DOM和BOM。

Web浏览器一般使用公共API来创建主机对象来负责将DOM对象反射进JavaScript。

3)常见的浏览器的排版引擎（又称渲染引擎）及脚本引擎
2.浏览器内核实现原理
1）Mozilla架构设计
界面和实现分离。

采用标记语言，JavaScript，C++来开发。

JSEngine就是指SpideMonkey，Layout就是指Gecko。

Mozilla的一个关键部分是XPCOM和NSPR。

2）渲染流程
3.浏览器的工作模式
1)工作模式简介
浏览器的工作模式常被称为“渲染模式”。

实际上浏览器不同的工作模式不仅对渲染有影响，对代码的解析以及脚本的行为也同样有影响。

从更广泛的角度来看，浏览器的工作模式的差异不仅体现在处理 HTML 页面的时候，处理 XML 及一些非 WEB 内容时也有模式上的差异，但本文仅讨论浏览器在处理 HTML 页面时工作模式。

2)工作模式的来源及变迁
微软于 2001 年 8 月 27 日发布的 IE6（Internet Explorer 6）增强了对 CSS1 的兼容，这使得 IE6 对 CSS 的解析及渲染与它的前一个版本 IE5.5 有了很大的差别，如对盒模型的理解、表格尺寸的算法等。

为了保持良好的向后兼容性，微软为用户提供了一个“开关”，来决定浏览器的工作模式，这个“开关”就是页面顶部的 DTD。

某些 DTD 将使 IE6 工作在“标准兼容模式”（即“标准模式”），这种模式使用了IE6 最新的处理方式，包括对 CSS1 的兼容及一些 DHTML 方面的增强。

而另一些 DTD，包括不设置 DTD 将使 IE6 工作在“向后兼容模式”（即“混杂模
式”），这种模式对页面的处理是与 IE5.5 保持一致的，这样就可以保证对一些在IE5.5 中表现良好的页面在 IE6 中也能达到同样的效果。

微软在后续推出的 IE7、IE8 中，也使用了上述“开关”，与 IE6 一样，在 IE7、IE8 的“混杂模式”下，对页面处理方式仍与 IE5.5 一致。

因此可以说，IE 系列的“混杂模式”，将浏览器的行为冻结在了 IE5.5 这个版本，虽然 IE 各版本的混杂模式也略有区别，但它们的本意都是向后兼容。

随着时间的推进和标准的进步，IE6、IE7 的“标准模式”逐渐已经变得不够标准了，2009年3月19日发布的 IE8 重新定义了“标准模式”，再次增强了对标准规范的支持，同时为了保持对 IE7 的兼容，IE8 增加了一种工作模式：“接近标准模式”。

于是，IE8 的工作模式就分成了三种：“标准模式”、“接近标准模式”和“混杂模式”。

目前所有主流浏览器对于向后兼容问题的处理都与 IE 系列一样，提供了不同的模式来保证向后兼容。

浏览器的工作模式就是在这种背景下诞生的，它很好的解决了浏览器对标准支持上的不断增强及对一些错误的修复而导致的向后兼容问题，但也将浏览器在不同情况下的表现及行为变得更加复杂多样。

通过以上的内容，我们可以得出结论：如果一个页面能使各浏览器都工作在“标准模式”下，那么各浏览器都将尽量兼容标准，因此各浏览器之间表现出的差异是很少的。

相反，如果一个页面使各浏览器都工作在“混杂模式”下，那么各浏览器都将尽量向后兼容，因此各浏览器之间表现出的差异将会最大化。

二、浏览器兼容性问题
目前市面上流行的浏览器有多种，这些浏览器在处理一个相同的页面时，表现或行
为有时会有差异。

这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某
个浏览器下无法正常浏览。

我们把引起这些差异的问题统称为“浏览器兼容性问题”。

1.浏览器兼容性问题分类
1)渲染相关
和样式相关的问题，即体现在布局效果上的问题。

2)脚本相关
和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题。

对于某些浏览器的功能方面的特性，也属于这一类
3)其他类别
除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。

2. 浏览器兼容性问题产生原因
造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。

1) 不同内核处理同一件事情的时候方法不同
比如：鼠标在元素内的位置。

IE 中使用offsetX 和offsetY 来获取鼠标在网页中
某一元素的位置，FireFox 使用layerX 和layerY 来得到鼠标在网页中某一元素的位置
2) 不同内核对html ，css ，js 支持情况不同
有时候，同是Trident 内核的不同
ie 版本仍会出现兼容问题，原因是Trident
有不同版本，对html ，
css ，
js 的支持情况也不同。

不同浏览器内核和使用的js引擎版本情况：
3)浏览器自身特性差异
比如：ie浏览支持active插件，非ie浏览器不支持
三、拍拍侧前端开发对兼容性的支持
1.hack
是一种在CSS和HTML中使用的,针对兼容性问题进行修复的语句.它的表现形式多种多样,如特殊字符(*,+,_等)
1)css属性Hack
比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识
2)选择器Hack
比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

2.条件注释
条件注释只能在windows Internet Explorer(以下简称IE)下使用，因此我们可以通过条件注释来为IE添加特别的指令。

条件注释从IE5开始被支持
条件注释的基本结构和HTML的注释(<!-- -->)是一样的。

因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们
〈!--[if !IE]〉〈!--〉除IE外都可识别〈!--〈![endif]
〈!--[if IE]〉所有的IE可识别〈![endif]--〉
er-agent嗅探
是浏览器的一种自我标记方式
erAgent
参考资料：
1. 浏览器引擎CSS支持比较
/wiki/%E7%80%8F%E8%A6%BD%E5%99%A8%E5%BC%95%E6%93%8EC SS%E6%94%AF%E6%8F%B4%E6%AF%94%E8%BC%83
2. Trident (排版引擎)
/wiki/Trident_(%E6%8E%92%E7%89%88%E5%BC%95%E6%93%8E)
3. 前端js开发中的浏览器兼容性.ppt ----kpxu。