html浏览器影响js问题,浏览器内核发展史总结及前端开发的影响-CSDN博客

一、主流浏览器及内核

A、渲染内核发展史

math?formula=%5Ccolor%7Bblue%7D%7B%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5%EF%BC%9A1993-2000%E5%B9%B4%E3%80%82pc%E7%AB%AF%E6%A5%9A%E6%B1%89%E4%BA%89%E9%9C%B8%EF%BC%9A%E7%BD%91%E6%99%AFGecko(%E6%97%A7)%20%E3%80%81%E5%BE%AE%E8%BD%AFTrident%7D

1、1993年：马赛克：开发出Mosaic内核的马赛克浏览器:这是人类历史上第一个浏览器

2、1994年：网景：开发出Gecko内核(旧)，及网景Netscape浏览器

3、1997年：微软：Mosaic内核 --> Trident内核，及IE浏览器

4、1998年：Linux开发出桌面系统的 KHTML内核

math?formula=%5Ccolor%7Bblue%7D%7B%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5%EF%BC%9A2000-2010%E5%B9%B4%E3%80%82%E7%BD%91%E6%99%AF%E6%88%98%E6%AD%BB%EF%BC%8C%E4%B9%8B%E5%90%8EIE%E5%BC%80%E5%A7%8B%E5%82%B2%E6%85%A2%E6%B2%A1%E8%90%BD%EF%BC%8C%E8%BF%9B%E5%85%A5%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%7D

math?formula=%5Ccolor%7Bblue%7D%7B%E5%BE%AE%E8%BD%AFTrident%20%E3%80%81%E7%81%AB%E7%8B%90Gecko%E3%80%81webkit%E9%98%B5%E8%90%A5(%E8%8B%B9%E6%9E%9C%E3%80%81%E8%B0%B7%E6%AD%8C)%7D

5、2000年：火狐：Mosaic内核 --> Gecko内核(新)，及火狐浏览器：火狐是网景的遗孤

6、2001年：苹果：KHTML内核 --> Webkit内核及Safari浏览器：引导了浏览器的本质回归潮流

7、2003年：挪威产浏览器 Opera 开发出Presto内核，2013 年被放弃改用谷歌内核【西凉军】

8、2008年：谷歌：webkit内核 --> chromium内核

math?formula=%5Ccolor%7Bblue%7D%7B%E7%AC%AC%E4%B8%89%E9%98%B6%E6%AE%B5%EF%BC%9A%202010-%E5%B9%B4%E3%80%82webkit%E9%98%B5%E8%90%A5(%E8%8B%B9%E6%9E%9C%E3%80%81%E8%B0%B7%E6%AD%8C%E5%BC%80%E5%A7%8B%E5%88%86%E9%81%93%E6%89%AC%E9%95%B3)%7D

math?formula=%5Ccolor%7Bblue%7D%7B%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%96%B0%E7%9A%84%E6%A5%9A%E6%B1%89%E4%BA%89%E9%9C%B8%EF%BC%9A%E8%8B%B9%E6%9E%9CWebkit%E3%80%81%E8%B0%B7%E6%AD%8Cblink%7D

09、2010年：苹果：Webkit内核 --> WebKit2内核

10、2013年：谷歌：chromium(Webkit)内核 --> Blink内核

11、2015年：微软：Trident内核 --> EdgeHtml内核

12、火狐开发servo内核

B、图解

7122f6f43a40?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

混沌之初.png

C、总结【五大主流浏览器及四大内核】

浏览器

内核

前缀

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(

Gecko

SpiderMonkey(<3.0)；TraceMonkey(<3/6)；JaegerMonkey(4.0+)

Webkit/Webkit2

JSCore/Nitro(4+)

Chromium(Webkit)；Blink

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端【五大主流浏览器及四大内核】

浏览器

内核

前缀

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 有着不同的含义

B：兼容问题相关文章