一、主流浏览器及内核
A、渲染内核发展史
1、1993年：马赛克：开发出Mosaic内核的马赛克浏览器:这是人类历史上第一个浏览器
2、1994年：网景：开发出Gecko内核(旧)，及网景Netscape浏览器
3、1997年：微软：Mosaic内核 --> Trident内核 ，及IE浏览器
4、1998年：Linux开发出桌面系统的 KHTML内核
5、2000年：火狐：Mosaic内核 --> Gecko内核(新)，及火狐浏览器：火狐是网景的遗孤
6、2001年：苹果：KHTML内核 --> Webkit内核及Safari浏览器：引导了浏览器的本质回归潮流
7、2003年：挪威产浏览器 Opera 开发出Presto内核，2013 年被放弃改用谷歌内核【西凉军】
8、2008年：谷歌：webkit内核 --> chromium内核
09、2010年：苹果：Webkit内核 --> WebKit2内核
10、2013年：谷歌：chromium(Webkit)内核 --> Blink内核
11、2015年：微软：Trident内核 --> EdgeHtml内核
12、火狐开发servo内核
B、图解
混沌之初.png
C、总结【五大主流浏览器及四大内核】
| 浏览器 | 内核 | 前缀 |
|---|---|---|
| IE | Trident | -ms- |
| Firefox | Gecko | -moz- |
| Safari | Webkit、WebKit2 | -webkit- |
| Chrome | chromium、Blink | -webkit- |
| Opera | Elektra、Presto、后采用谷歌内核chromium、 Blink | -o- |
D、JS引擎
| 渲染内核 | JS引擎 |
|---|---|
| Trident(<=IE10)；EdgeHTML | JScript(<IE9)；Chakra(IE9+及Edge) |
| Gecko | SpiderMonkey(<3.0)；TraceMonkey(<3/6)；JaegerMonkey(4.0+) |
| Webkit/Webkit2 | JSCore/Nitro(4+) |
| Chromium(Webkit)；Blink | V8 |
| Presto；chromium、Blink | Futhark(9.5-10.2)；Carakan(10.5+) |
二、国内浏览器(壳)
A、pc端
1、360浏览器、猎豹浏览器：IE（兼容模式）+Chrome双内核；
2、搜狗、遨游、QQ浏览器：IE（兼容模式）+Webkit双内核；
3、百度浏览器、世界之窗：IE内核；
B、移动端(就是在开源核上的专属优化)
1、uc浏览器：基于WebKit内核开发的U3内核【增加云端架构(实现压缩流量、加速加载功能】
2、qq浏览器等微信浏览服务：基于WebKit内核开发的X5内核（现已升级至Blink）
3、360浏览器：基于Chrome内核开发的G5内核
4、百度浏览器：基于WebKit内核开发的T5内核
三、总结
A:pc端【五大主流浏览器及四大内核】
| 浏览器 | 内核 | 前缀 |
|---|---|---|
| IE | Trident | -ms- |
| Firefox | Gecko | -moz- |
| Safari | Webkit、WebKit2 | -webkit- |
| Chrome | chromium、Blink | -webkit- |
| Opera | Elektra、Presto、后采用谷歌内核chromium、 Blink | -o- |
B:移动端【新的楚汉争霸：苹果Webkit、谷歌blink】
1、iPhone等iOS平台主要采用WebKit
2、Android 4.4之前的Android系统浏览器内核为WebKit, Android4.4之后采用谷歌自己的内核
3、Windows Phone 8系统浏览器内核为Trident.
四、对前端的影响
这里的举例只是抛砖引玉，打开思路
A：分别对HTML、CSS、JS的兼容问题
1、HTML兼容问题：
1、img的alt属性，在图片不存在的情况下，各浏览器的解析不一致
在webkit(谷歌苹果)内核下显示的是一张破损的图片
在Gecko(火狐)内核下显示的是alt的文字
而在Trident(IE)中显示的是破损的图片加文字
2、ul标签内外边距问题
ul标签在IE6IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距
2、CSS兼容问题：
1、reset.css的诞生
2、css兼容前缀、条件注释、CSS Hack、js 能力检测做一些修补
3、Js兼容问题：
0、`jquery的诞生`
//事件
1、事件绑定：标注方法addEventListener，但IE下是attachEvent
2、事件捕获：标准是由捕获，而IE是冒泡，但是最后的结果是将IE的标准定为标准
3、获取event方式：准浏览器其是传参传入的，IE下由window.event获取的
4、获取目标元素方式：标准浏览器是event.target，而IE下是event.srcElement
。。。
4、ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject
5、获得DOM节点的父节点、子节点的方式不同
6、在IE、FireFox、Netscape等不同的浏览器里，对于document.body的clientHeight、offsetHeight 和 scrollHeight 有着不同的含义
网友评论