`

主流浏览器内核及浏览器CSS兼容前缀

阅读更多

【前言】

       今天聊天有个之前的学生问了道面试遇到的问题:主流浏览器有哪些?内核?CSS兼容前缀?

       

【我的答复】

(1)五大主流浏览器:①IE;②Opera;③Chrome;④Sarafi;④FireFox

(2)CSS兼容前缀:

-webkit-  //Chrome,Safari
-moz-     //FireFox
-o-       //Opera
-ms-      //IE

 (3)内核:这个比较杂,网上答案也众说风云,这里我详细解析下。

 

【概论】

        浏览器内核(browser kernel)是浏览器最为核心的部分。国内的浏览器(诸如360,QQ,搜狗)大多数用了第三方的内核,不同的只是外观以及一些装饰性的功能罢了。(有些浏览器是双核模式,标准模式下是chrome的内核,兼容模式下是IE的内核,用以向下兼容旧网页,诸如360浏览器)

 

【详解】

        浏览器的内核是分为两个部分的,一是渲染引擎,负责生成DOM树,render,repaint这些工作;另一个是JS引擎,负责JS的解释执行。现在JS引擎比较独立,内核更加倾向于说渲染引擎。

        下面说下各个内核,以下为网上查阅资料

(1)Trident(译为三叉戟)内核:

       Trident是IE的内核,也就是国内双核浏览器的内核之一。Trident内核一直延续到IE11,IE11的后继者Edge采用了新内核EdgeHTML。

       代表作品是IE,因IE捆绑在Windows中,所以占有极高的份额,又称为IE内核或MSHTML,此内核只能用于Windows平台,且不是开源的。

       代表作品还有腾讯、Maxthon(遨游)、360浏览器等。但由于市场份额比较大,曾经出现脱离了W3C标准的时候,同时IE版本比较多,存在很多的兼容性问题。

(2)Gecko(译为壁虎)内核:

       代表作品是Firefox,即火狐浏览器。因火狐是最多的用户,故常被称为firefox内核它是开源的,最大优势是跨平台,在Microsoft Windows、Linux、MacOs X等主要操作系统中使用。

       Mozilla是网景公司在第一次浏览器大战败给微软之后创建的。有兴趣的同学可以了解一下浏览器大战

(3)Webkit(译为网络工具包)内核:

       代表作品是Safari、曾经的Chrome,是开源的项目

(4)Presto(译为急板)内核:

       代表作品是Opera,Presto是由Opera Software开发的浏览器排版引擎,它是世界公认最快的渲染速度的引擎。在13年之后,Opera宣布加入谷歌阵营,弃用了Presto 。

      Opera浏览器的内核最初是Presto,前几年宣布使用Google的开源项目Webkit作为自己的内核,没过多久,又跟随Google使用Blink内核

(5)Blink(译为眨)内核:

       由Google和Opera Software开发的浏览器排版引擎,2013年4月发布。

       这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支。

       谷歌还开发了自己的JS引擎,V8,使JS运行速度极大地提高了。在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用(其自己开发的渲染引擎Bilnk和JS的V8引擎)。谷歌在Chromium Blog上发表博客 ,称将与苹果的开源浏览器核心Webkit分道扬镳。在Chromium项目中研发Blink渲染引擎(即浏览器核心),内置于Chrome浏览器之中。

 

【总结】

(1)最后简单总结罗列下

①Trident----IE----(-ms-)-----------不是开源且不能跨平台,只能用于windows

②Gecko--FireFox--(-moz-)-------开源且可以跨平台,用于Windows、Linux、MacOs X等平台

③Webkit---Chrome(28之前的旧版本)和Safari--(-webkit-)---开源项目,跨平台

④Presto---Opera---(-o-)------------渲染速度最快的引擎

⑤Blink---Google和Opera Software、Chrome(28之后的新版本)软件

 

(2)许多同学容易将Google和Chrome记混,这里区别说明下

google是世界最大的搜索引擎谷歌,chrome是google旗下开发的一款浏览器

 

(3)WebKit内核常见的浏览器:傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器

 

 

 

分享到:
评论

相关推荐

    css 浏览器兼容性速查

    "CSS浏览器兼容性速查"是开发者在工作中不可或缺的一个参考资料,它帮助我们了解各种CSS属性在不同浏览器上的表现,以便于优化代码,确保网站在主流浏览器上都能正常显示。 首先,我们要理解浏览器兼容性问题的来源...

    各浏览器css兼容写法

    1. **浏览器内核与前缀**: - 不同浏览器使用不同的内核,例如:Chrome和Safari使用WebKit,Firefox使用Gecko,Edge和旧版IE使用Trident。这些内核对CSS新特性的支持程度不同。 - 为新特性添加特定的浏览器前缀,...

    浏览器兼容报告

    浏览器兼容报告是对Web开发中一个...总结起来,浏览器兼容报告关注的是如何在不同浏览器内核环境下保持网页的一致性。Web开发者必须理解各种内核的特性,才能有效地解决兼容性问题,为用户提供一致且流畅的浏览体验。

    解决浏览器兼容

    本篇将深入探讨如何解决浏览器兼容问题,帮助您确保网站或应用在各种主流浏览器上都能正常运行。 一、了解浏览器内核 首先,我们要明白浏览器兼容性问题的根源在于各浏览器所使用的内核不同,常见的有以下几类: 1...

    CSS在不同浏览器的兼容性问题

    这通常给前端开发者带来挑战,因为他们需要确保网页在所有主流浏览器上都能正常工作。 描述中的“CSS兼容性问题汇总文档”意味着存在一份文档,详细列举了CSS在不同浏览器中遇到的常见兼容性问题以及相应的解决策略...

    jQuery css3猎豹浏览器宽屏banner焦点图切换代码

    开发者需要确保代码在猎豹浏览器以及其他主流浏览器上都能正常工作,这可能涉及到对某些CSS3特性的前缀支持,以及jQuery的兼容性优化。 6. 文件结构: 压缩包中的"texiao4606_1560681054"可能包含HTML文件(包含...

    兼容各种浏览器的日历控件

    目前市场上的主流浏览器有Chrome、Firefox、Safari、Edge以及旧版的Internet Explorer,它们的内核各异,对HTML、CSS和JavaScript的支持程度不同。特别是对于一些高级特性,如CSS3动画、Web组件或是ES6以上的...

    各浏览器下Hack的写法

    以下是针对各主流浏览器的一些CSS Hack写法: 1. **Firefox**: 使用`@-moz-document url-prefix()`来为Firefox编写特定的CSS规则。例如: ```css @-moz-document url-prefix() { .selector { property: value...

    超酷CSS3图片3D旋转效果,鼠标悬停后,图片会3d旋转到另外一面。兼容chrome、firefox浏览器.rar

    以上代码片段包含了针对Webkit(Chrome、Safari等)和Gecko(Firefox)内核的浏览器的前缀,以确保更广泛的兼容性。 总的来说,通过CSS3的3D转换功能,我们可以轻松创建出各种动态效果,如3D旋转。这个例子展示了...

    WEB前端标准在各浏览器中的差异.zip_web标准_浏览器

    4. **浏览器内核**:主流浏览器分为 Trident(IE)、Gecko(Firefox)、Blink(Chrome、Opera)和WebKit(Safari、早期Chrome)。每个内核对标准的解析和实现都有其独特性,这导致了渲染和脚本执行的差异。 5. **...

    IE FIREFOX兼容性测试

    这指的是针对Internet Explorer(IE)和Mozilla Firefox这两款主流浏览器进行的兼容性测试。由于它们各自采用不同的内核和渲染机制,导致在解析和执行网页代码时可能存在差异,因此需要进行专门的测试以确保在各个...

    浅谈css3中的前缀

    随着CSS3的不断发展,主流浏览器厂商为了能够支持最新的CSS3特性,往往会在自己的浏览器中添加特定的前缀。这些前缀是暂时性的,目的是为了测试新的CSS属性,防止不兼容导致的问题。在标准最终确定之后,这些前缀...

    兼容当前五大浏览器的渐变颜色背景gradient的写法

    现在,我们可以总结一个兼容各主流浏览器的渐变背景的CSS写法: ```css #gradient { width: 200px; height: 200px; background: url(gradient.jpg); /* 不支持渐变时使用图片作为备用 */ /* Webkit浏览器...

    CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

    本文将详细介绍如何创建一个垂直渐变,从红色渐变到半透明的蓝色,并在不支持Opera浏览器的情况下兼容其他主流浏览器。 首先,我们来看一下IE浏览器的解决方案。由于IE使用的是滤镜(filter)技术,因此我们需要...

Global site tag (gtag.js) - Google Analytics