手记

主流浏览器与CSS3

浏览器内核

      Rendering Engine,中文翻译很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核。

      Rendering Engine,顾名思义,就是用来渲染网页内容的,将网页的代码转换为最终你看得见的页面。因为是排版,所以肯定会排版错位等问题。为什么会排版错位呢?有的是由于网站本身编写不规范,有的是由于浏览器本身的渲染不标准。

      现在有几个主流的排版引擎,因为这些排版引擎都有其代表的浏览器,所以常常会把排版引擎的名称和浏览器的名称混用,比如常的说IE内核、Chrome内核。其实这样子是不太合理的,因为一个完整的浏览器不会只有一的排版引擎,还有自己的界面框架和其它的功能支撑,而排版引擎本身也不可能实现浏览器的所有功能。

      下面罗列一下几款主流的排版引擎和浏览器。

       1、Trident 内核(Windows)

          Trident 就是大名鼎鼎的 IE浏览器 所使用的内核,也是很多浏览器所使用的内核,通常被称为IE内核。

          Trident内核的常见浏览器有:

          IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0); 世界之窗、 360安全浏览器、傲游;搜狗浏览器;百度浏览器(早期版本)等等。

          其中部分浏览器的新版本是“双核”甚至是“多核”,其中一个内核是Trident,然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”,而Trident则是“兼容浏览模式”,用户可以来回切换。

       2、Gecko(跨平台)

          Netscape6 启用的内核,现在主要由Mozilla基金会进行维护,是开源的浏览器内核,目前最主流的Gecko内核浏览器是Mozilla Firefox,所以也常常称之为火狐内核。不过比较可惜的是,虽然是开源的,也开发了这么多年,基于Gecko的浏览器并不多见。

       3、KHTML(Linux)

          KDE开发的内核,速度快捷,容错度低。这个内核可能不见得很多人知道,但是后面再看下去你就明白了。常见的KHTML内核的浏览器:Konqueror。

       4、WebKit(跨平台)

          由KHTML发展而来,也是苹果给开源世界的一大贡献。是目前最火热的浏览器内核,火热倒不是说市场份额,而是应用的面积和势头。因为是脱胎于KHTML,所以也是具有高速的特点,同样遵循W3C标准。从目前看来,WebKit 内核是最有潜力而且是已经有相当成绩的新兴内核,性能非常好,而且对W3C标准的支持很完善,本人非常看好它。

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

      5、Chromium(跨平台)

          其实 Chromium 就是 WebKit,维基百科里面并没有将Chromium从WebKit分出来。Chromium把WebKit的代码梳理得可读性提高很多,所以以前可能需要一天进行编译的代码,现在只要两个小时就能搞定。这个也能解释为什么Gecko和WebKit出来了这么久,第三方编译、定制的版本并不多,但是由Chromium衍生出来的浏览器早就满坑满谷了。

          常见的Chromium内核的浏览器:Google Chrome、Chromium、SRWare Iron、Comodo Dragon。

     6、Presto(跨平台)

          Opera 所采用的内核,准确地说,是Opera 7.0及以后版本的内核,Opera 3.5-6.1版本使用的内核叫做Elektra。不用说,Presto对W3C标准的支持也是很良好的,但对Presto的渲染速度持有保留态度。Presto优先解析文字,保证可阅读性,媒体资源的渲染放后。常见的Presto内核的浏览器:Opera。

 

javascript引擎

        

    JavaScript引擎就是用来执行JS代码的。譬如说,一个算圆周率的网页,排版引擎把页面的框架给显示出来了,但最终的结果需要用到 Javascript 来计算,所以Javascript引擎的快慢也是对整个网页的速度有着很大影响,特别是目前越来越多类似 WebQQ、Gmail 等大量应用了复杂的 Javascript 运算的网站,不同的引擎最终的速度差异会相当大。

    为什么要单独拿出来说呢?因为它还涉及到跑分。经常看见很多文章在报道说哪个浏览器更快,其实大部分说的就是JavaScript的渲染速度,而不是页面的载入速度。在网速许可的情况下,其实各个浏览器的页面载入速度差别不大(Opera逊色一些)。那是不是说对比JavaScript的渲染速度其实没有意义?也不是这么说,因为现在JavaScript在页面中的比重会越来越大,越来越多的动态页面开始大量借助JavaScript,比如现在主流的SNS、邮箱、网页游戏,所以JavaScript的渲染速度也是一个很重要的指标。JavaScript的渲染速度越快,动态页面的展示也越快。Opera在JavaScript引擎的跑分上面一直都是很牛逼的,一般来说最新测试版之间PK,Opera基本都会夺冠。

      1、Chakra 查克拉,IE9启用的新的JavaScript引擎。

      2、SpiderMonkey / TraceMonkey / JaegerMonkey

          SpiderMonkey应用在Mozilla Firefox 1.0-3.0,TraceMonkey应用在Mozilla Firefox 3.5-3.6版本,JaegerMonkey应用在Mozilla Firefox 4.0及后续的版本。

      3、V8 应用于Chrome、傲游3。

      4、Nitro 应用于Safari 4及后续的版本。

      5、Linear A/Linear B/Futhark/Carakan

      Linear A应用于Opera 4.0-6.1版本,Linear B应用于Opera 7.0~9.2版本,Futhark应用于Opera 9.5-10.2版本,Carakan应用于Opera 10.5及后续的版本。

      6、KJS KHTML对应的JavaScript引擎。

几个与浏览器有关的测试项目

      1、V8引擎 测试传送门,现在很多“双核”浏览器都用它来跑分测试JavaScript引擎,分数越高越好。

      2、Acid3 测试传送门,这个主要是对网页标准的兼容性测试,分数越高表示越符合网页的开发标准,满分是100分。

      3、HTML5 测试传送门,测试浏览器对HTML5标准的支持,分数越高越好。

几个奇葩

      1、IETab

          这是一款浏览器扩展,并非内核。在没有第三方编译版本的时候,IETab一直是 Mozilla Firefox、Chrome等非Trident内核的浏览器的安装量最大的扩展之一,方便用户在不开启IE的情况下调用Trident内核访问一些兼容性比较差的网站。

      2、Trident/Gecko双核浏览器

          虽然IETab能实现部分需求,但是深度订制的毕竟还是不一样,所以Trident/Gecko双核浏览器就诞生了,Sleipnir、Avant 12(Orca)是这类里面比较常见的。Avant 12因为有Orca的前期积累,所以轻车熟路,后面还打算加入Chromium,变成三核浏览器,但是偏偏现在Mozilla Firefox和Chrome都在疯狂刷版本号,肯定有一部分精力要花在跟进版本上。

      3、Trident/WebKit双核浏览器

          现在国内最主流的“双核”浏览器基本都是这个架构,360极速浏览器、世界之窗浏览器极速版、傲游3、搜狗浏览器、QQ浏览器、枫树浏览器、快快浏览器、百度浏览器、阿云浏览器(后期版本)、太阳花浏览器,其中最奇葩的是傲游3。其它双核浏览器都是基于Chromium的,而傲游是基于WebKit的,但是偏偏又用的是V8引擎。

      4、Trident/Gecko/WebKit三核浏览器

          目前能见的应该就是日本的Lunascape,Avant增加了WebKit内核之后也会归类到这里。说实话,Lunascape真的很难用,真的很奇葩。各个内核相对独立,外壳本身不够强化,稳定性不高,所以还不如用回单核浏览器。

几个小点

      1、Chrome/Chromium

      很多人都会说自己用的双核浏览器是Chrome/IE双核的,或者说是基于Chrome的。其实这种说法并不正确,因为Chrome本身并不开源,其它厂商是不能去定制Chrome的。能被修改、定制的是Chromium,Chrome的开源开发版本,代码和Build都提供下载。Chromium/Chrome两个单词都是铬,分别是拉丁文和英文,除了名字之外,很有很多不同,你可以自己对比一下。Chromium一天最多可以更新十几二十个版本,实验性的新特性都会现在这里放出,但是Chromium本身其实并不稳定。Chrome总共有四个更新分支:Canary、Dev、Beta、Stable,稳定性依次增强。

     2、页面兼容性判断

         在确保IE浏览器没有损坏的基础上,搭配一款非Trident内核的浏览器进行判断,如果可以的话,最好所有内核都配齐了。控制变量就能找到问题所在,是浏览器本身的问题,还是页面编码有问题。对于用户来说就能更好地去选择自己该用什么浏览器访问什么页面,对于开发者来说应该要写出无差别代码。

                                   ——以上内参考自:http://www.iplaysoft.com/browsers-engine.html

主流浏览器对CSS3的支持


   并非所有的浏览器都支持CSS3,各主流浏览器都定义了自己私有的属性,以便让用户体验CSS3的特性,然而这种各自为政的方式在避免不同浏览器在解析相同属性时出现冲突的同时,也给设计师带来诸多不便,需要使用更多的CSS代码,而且非常容易导致同一个页面在不同浏览器之间表现不一致。

   网页不需要在所有浏览器上看起来都严格一致,有时候在某个浏览器中使用私有属性实现特定效果也是可行的。

      Webkit:如Safari、Chrome,私有属性以-webkit-为前缀;

      Gecko:  如Firefox,私有属性以-moz-为前缀;

      Konqueror: 私有属性以-khtml-为前缀;

      Opera: 私有属性以-o-为前缀;

      Internet Explorer: 私有属性以-ms-为前缀(目前只有IE8+支持);

   

0人推荐
随时随地看视频
慕课网APP