[TOC]
浏览器间差异
| 公司 | 浏览器 | 渲染引擎(内核) | JS引擎 |
|---|---|---|---|
| Microsoft微软 | IE6-11 | Trident | Chakra (JScript 引擎) |
| Edge(2015年) | EdgeHTML | Chakra (JavaScript 引擎) | |
| Mozilla | Firefox | Gecko | SpiderMonkey |
| Chrome | Webkit，2013年后Blink | V8 | |
| Apple | Safari | Webkit | JavaScriptCore |
| 挪威Opera Software ASA公司 | Opera12.16+ | Presto，2013年后Blink | Carakan |
浏览器内核优劣比较：
| 浏览器 | 内核 | 优点 | 缺点 | 内核搭配模式 |
|---|---|---|---|---|
| IE | Trident | 兼容性好 | 缺少延展 | 兼容单核 |
| Firefox | Gecko | 扩展强 | 数据档案保存能力弱 | 排版引擎单核 |
| Chrome | Blink | 不易奔溃速度快 | 系统资源占用较高 | 急速单核 |
| Safari | Webkit | 速度快、安全 | 系统资源占用较高 | 急速单核 |
1. 每个浏览器内核
浏览器最重要或者说核心的部分是 Rendering Engine，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
1.1 Trident(IE浏览器) 后续EdgeHTML、Blink
Trident是微软开发的一种排版引擎。
基于Trident内核的浏览器有 ie6、ie7、ie8(Trident 4.0) 、ie9(trident 5.0) 、ie10(trident6.0)、ie11(trident7.0)、国内的很多双核浏览器也是基于trident内核的，例如：世界之窗、360安全浏览器、遨游2.0（3.0以上版本开始采用webkit内核）、搜狗浏览器、腾讯浏览器等。
Trident 已经被 EdgeHTML 所取代，2019 年 EdgeHTML 被 Blink 取代。
1.2 Gecko(跨平台)(Firefox浏览器)
Gecko是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用。
正在和曾经使用Gecko引擎的浏览器有Firefox、SeaMonkey、Camino、Mozilla、Flock、Galeon、K-Meleon、Minimo、Sleipni、Songbird、XeroBank。
Google Gadget引擎采用的就是Gecko浏览器引擎。
Goanna 是 Gecko 的一个分支。
1.3 WebKit(Safari、Chrome)后续Blink
WebKit 是一个开放源代码的浏览器引擎(Web Browser Engine)。WebKit也是自由软件，同时开放源代码。它的特点在于源码结构清晰、渲染速度极快。主要代表产品有Safari和Google的浏览器Chrome。
WebKit内核在手机上的应用也十分广泛，例如Google的Android平台浏览器、Apple的iPhone浏览器、Nokia S60浏览器等所使用的浏览器内核引擎，都是基于WebKit引擎的。
WebKit内核也广泛应用于Widget引擎产品，包括中国移动的BAE、Apple的Dashboard以及Nokia WRT在内采用的均为WebKit引擎。
Google 最初使用 WebKit 用于 Chrome 浏览器，但最终将其分支为自行建构的 Blink 引擎。所有以 Chromium 为基础的浏览器都使用 Blink，使用 CEF（英语：Chromium Embedded Framework），Electron 或任何其他 Chromium 嵌入式框架构建的应用程序也是如此。
1.4 Presto(Opera)后续Blink
Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。
Presto的特点就是渲染速度的优化达到了极致，它是目前公认的网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。
Presto实际上是一个动态内核，与Trident、Gecko等内核的最大区别就在于脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行JavaScript时有着最快的速度，根据同等条件下的测试，Presto内核执行同等JavaScript所需的时间仅有Trident和Gecko内核的约1/3。
Presto是商业引擎，除了Opera以外较少浏览器使用Presto内核，这在一定程度上限制了Presto的发展。
老的IE浏览器有一套自己的标准，其他内核的浏览器都在尽量遵守 W3C 标准。
Presto 引擎 2013 年被 Blink 取代。
1.5 浏览器引擎前缀(CSS属性)
浏览器厂商们有时会给实验性的或者非标准的 CSS 属性和 JavaScript API 添加前缀，这样开发者就可以用这些新的特性进行试验，同时（理论上）防止他们的试验代码被依赖，从而在标准化过程中破坏 web 开发者的代码。开发者应该等到浏览器行为标准化之后再使用未加前缀的属性。
主流浏览器引擎前缀:
- -webkit- （谷歌，Safari，新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于 WebKit 内核的浏览器）
- -moz- （火狐浏览器）
- -o- （旧版 Opera 浏览器）
- -ms- （IE 浏览器 和 Edge 浏览器）
2. JavaScript引擎
JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。
2.1 SpiderMonkey(Firefox)
SpiderMonkey是世界上第一款JavaScript引擎，由前网景公司的 布兰登·艾克 设计，后期由 Mozilla基金会 维护，以开放源代码发布。目前为 Mozilla Firefox网页浏览器 所使用的JavaScript引擎，并也被嵌入到其他许多环境，例如GNOME 3桌面。
TraceMonkey是第一个为JavaScript语言编写的JIT编译器，于2008年8月23日发布并最先作为Firefox 3.5的SpiderMonkey中的编译引擎。相比Firefox 3.0的编译器，它提供了高达20到40倍的性能改善。
比起编译全部函数，TraceMonkey采用追踪即时编译（trace Just-in-time Compilation）将JavaScript编译成二进制码（Binary code）以提高执行性能，它的运作方式是在执行期间借由追踪和记录控制流程及数据类型，将其用于建构追踪树（Trace Trees），以生成高度优化路径的原生码，追踪树技术由欧文加利福尼亚大学研究团队贡献，安德里亚斯·加尔是该团队的负责人。
2.2 V8(Chrome)
V8是一个由Google开发的开源JavaScript引擎，用于Google Chrome及Chromium中，项目以V8发动机其命名。此项目由Lars Bak主导开发。
V8在执行之前将JavaScript编译成了机器代码，而非字节码或是解释执行它，以此提升性能。更进一步，使用了如内联缓存（inline caching）等方法来提高性能。有了这些功能，JavaScript程序与V8引擎的速度媲美二进制编译。
传统的Javascript是动态语言，又可称之为Prototype-based Language，JavaScript继承方法是使用prototype，透过指定prototype属性，便可以指定要继承的目标。属性可以在运行时添加到或从对象中删除，引擎会为执行中的对象建立一个属性字典，新的属性都要透过字典查找属性在内存中的位置。V8为object新增属性的时候，就以上次的hidden class为父类别，创建新属性的hidden class的子类别，如此一来属性访问不再需要动态字典查找了。
为了缩短由垃圾回收造成的停顿，V8使用stop-the-world, generational, accurate的垃圾回收器。在执行回收之时会暂时中断程序的执行，而且只处理对象堆栈。还会收集内存内所有对象的指针，可以避免内存溢出的情况。V8汇编器是基于Strongtalk汇编器。
2.3 JavaScriptCore(Safari)
JavaScriptCore是一个在WebKit中提供JavaScript引擎的框架，而且在OS X作为其他内容的脚本引擎。JavaScriptCore最初是为KDE的JavaScript引擎（KJS）函数库及PCRE正则表达式函数库，JavaScriptCore从KJS及PCRE复刻之后，已比原先进步了许多，有了新的特色以及极大的性能改进。
在2008年6月2日，WebKit项目宣布，将JavaScriptCore重写为"SquirrelFish"，它是一个字节码解释器，这个项目演变成SquirrelFish Extreme（简称为SFX，市场称之为Nitro），首次公开于2008年9月18日，它会将Javascript编译为原生的机器语言，不再需要字节码解释器，同时加速了JavaScript的执行效率。
2.4 Chakra (JScript引擎)(IE)
Chakra是一个由微软为其Internet Explorer 9和Internet Explorer 10和Internet Explorer 11和等网页浏览器开发的JScript引擎。其特色是，它在一个独立的CPU核心上即时编译脚本，与浏览器并行。
JScript是由微软公司开发的动态脚本语言，是微软对ECMAScript规范的实现。
JScript最初随Internet Explorer 3.0于1996年8月发布。在网络程序员谈论Internet Explorer中的JavaScript的时候，他们实际上是指JScript。和其他活动脚本一样，它后来也被Windows Script Host和Active Server Pages所支持。典型的JScript源文件使用的扩展名是.js。
JScript最新的版本是基于尚未定稿的ECMAScript 4.0版规范的JScript .NET，并且可以在微软的.Net环境下编译。JScript在ECMA的规范上增加了许多特性。
2.5 Chakra (JavaScript引擎)(Edge)
Chakra是由微软为其Microsoft Edge网页浏览器开发的JavaScript引擎。它是Internet Explorer中使用的JScript引擎的一个分支。2015年12月5日，微软宣布将Chakra的核心组件开放源代码并命名为ChakraCore。
3. 浏览器间的差异及解决
览器间差异和平台的兼容性问题是指不同浏览器（如Chrome、Firefox、Safari等）以及不同操作系统（如Windows、MacOS、iOS等）对Web技术的支持和解释存在差异，导致同一份代码在不同浏览器和平台上显示和行为可能不一致的情况。
3.1 产生差异原因
这些差异主要源于以下方面：
- 1、HTML、CSS和JavaScript解释差异：不同浏览器对HTML、CSS和JavaScript的解释和渲染方式可能存在差异，导致页面在不同浏览器上显示效果不同。
- 2、浏览器功能支持不同：不同浏览器支持的HTML、CSS和JavaScript功能可能不同，某些特定特性在某些浏览器上可能无法使用或具有不同的行为。
- 3、非标准特性和私有前缀：某些浏览器可能支持非标准的或者带有私有前缀的CSS和JavaScript特性，这导致必须针对不同浏览器编写不同的代码。
- 4、操作系统和设备差异：不同操作系统和设备可能对字体、UI元素和交互方式有不同要求，导致在设计和开发时需要考虑兼容问题。
3.2 解决兼容性问题
为解决这些兼容性问题，常用的做法包括：
- 1、使用标准化、跨浏览器的Web技术：遵循HTML、CSS和JavaScript的标准规范，以确保在不同浏览器上的一致性。
- 2、使用兼容性库或框架：如jQuery、Bootstrap等，提供了一致的封装和处理浏览器差异的方法。
- 3、进行测试和调试：在不同浏览器和平台上进行全面的测试，并使用开发者工具进行调试，解决兼容性问题。
- 4、灵活适配：根据具体需求，使用CSS媒体查询、特性检测和前缀自动补全等技术来适配不同的浏览器和平台。
总之，理解浏览器间差异和平台的兼容性问题，并采取合适的策略来解决这些问题，有助于确保网站或应用在不同环境下的一致性和良好的用户体验。
浏览器的差异主要体现在它们对于 HTML、CSS 和 JavaScript 的解析和渲染上。为了处理不同浏览器和平台的兼容性问题，我们可以采取以下几个步骤：
熟悉不同浏览器的特性和支持程度：要解决兼容性问题，首先需要了解各个浏览器的差异和支持程度。常见的浏览器包括 Chrome、Firefox、Safari、Edge 等，它们对于 HTML、CSS 和 JavaScript 的规范实现存在一些差异。了解这些差异有助于我们理解兼容性问题的起因和解决方法。
使用标准化的 Web 技术：使用符合 HTML、CSS 和 JavaScript 标准的代码可以最大程度地增加跨浏览器兼容性。遵循标准的代码能够在多个浏览器中一致地运行。我们需要注意使用已被广泛支持和推广的标准特性，避免使用过时的技术或浏览器私有的特性。
CSS 兼容性处理：在编写 CSS 代码时，我们需要考虑不同浏览器对 CSS 属性和样式的解析和渲染方式。可以使用 CSS 前缀（vendor prefix）以及 CSS hack 技术来实现不同浏览器的兼容性。比如，当我们需要使用某个新的 CSS 属性时，可以在属性前加上不同浏览器的前缀（如 -webkit-、-moz-、-ms-、-o- 等）来适配不同内核浏览器。
JavaScript 兼容性处理：在编写 JavaScript 代码时，我们需要注意不同浏览器对 JavaScript 的支持程度和特性。可以使用特性检测（feature detection）和浏览器嗅探（browser sniffing）的方法来判断浏览器的特性支持情况，并根据不同情况编写相应的代码逻辑。此外，对于不支持的特性，我们可以使用 polyfill（垫片）来补充实现，以保证功能的兼容性。
4. IE、Firefox、Safari、Chrome/Opera的一些常见兼容问题
| 问题 | IE | FireFox | Safari | Chrome/Opera |
|---|---|---|---|---|
| CSS盒模型 | IE6及以下版本的浏览器不支持标准的W3C盒模型，而是采用了IE盒模型 | 支持标准的W3C盒模型 | 支持标准的W3C盒模型 | 支持标准的W3C盒模型 |
| PNG透明度 | IE6不支持PNG透明度 | 支持PNG透明度 | 支持PNG透明度 | 支持PNG透明度 |
| CSS3属性 | 一些浏览器可能不支持CSS3的新属性，如border-radius、box-shadow等 | 支持CSS3的新属性 | 支持CSS3的新属性 | 支持CSS3的新属性 |
| JavaScript | 不同浏览器对JavaScript的支持程度也有所不同 | 支持JavaScript | 支持JavaScript | 支持JavaScript |
| HTML5 | 不同浏览器对HTML5的支持程度也有所不同 | 支持HTML5 | 支持HTML5 | 支持HTML5 |
| 响应式设计 | 不同浏览器对响应式设计的支持程度也有所不同 | 支持响应式设计 | 支持响应式设计 | 支持响应式设计 |
以上只是一些常见的兼容性问题和解决方案，实际情况可能更复杂。在开发过程中，建议使用一些工具，如Can I Use、BrowserStack等，来进行兼容性测试。
处理不同浏览器和平台的兼容性问题需要熟悉各种浏览器的特性和支持程度，并且使用标准化的 Web 技术来编写代码。对于 CSS，可以使用前缀和 hack 技术来适配不同浏览器；对于 JavaScript，可以进行特性检测和嗅探，并使用 polyfill 来补充实现缺失的特性。在实际开发中，要关注不同浏览器的最新版本和特性，并配合使用工具和框架来简化兼容性处理。