浅谈浏览器内核以及渲染程度

浏览器内核

浏览器最重要或者说核心的东西是“Rendering Engine”,可以理解为解释引擎,一般称之为“浏览器内核”。负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页。所以,通常所谓的浏览器内核也就是浏览器采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。浏览器的内核很多,如果加上所有几乎没有人在用的非商业的免费内核,那么大约有10款以上甚至更多,不过通常我们比较常见的大约有四种:下面简单介绍一下。


Trident

IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并一直沿用至IE9。
Trident实际上是一款开放的内核,其接口设计的相当成熟,因此才有许多采用IE内核而非IE浏览器涌现(如Maxthon,The World ,TT,GreenBrower,AvantBrower)此外,为了方便人们也称之为IE内核。由于IE本身的垄断性而是Trident内核长期一家独大,微软很长的时间并没有更新Trident内核,这导致了两个后果:- Trident内核几乎与W3C标准脱节- Trident内核的大量BUG等安全性问题没有得到及时解决,然后加上一些致力于开源的开发者和一些学者公开认为IE浏览器不安全的观点,也有很多用户转向了其他浏览器,Firefox和Opera就是在这个时候兴起的。非Trident内核浏览器市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非IE浏览器的浏览问题。


Gecko

Netscape6开始采用的内核,后来的Mozilla Firefox采用了该内核,Gecko的优点在于代码完全公开,因此,其开发程序很高,全世界的程序员都可以为其增加代码,增加功能。因为这个开源的内核,因此受到了许多人们的青睐,Gecko内核浏览器也非常多,这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。事实上,Gecko引擎的由来跟IE不无关系,前面说过IE没有使用W3C标准,这导致微软内部一些开发人员不满,他们当时已经停止更新了Netscape的一些员工创办了Mozilla,以当时的Mosaic内核为基础重新编译内核,于是开发出Gecko。不过事实上,Gecko内核浏览器仍然是Firefox用户最多,所以有时也会被称之为Firefox内核。此外,Gecko也是一个跨平台内核,可在Window、BSD、Linux和Mac OS中使用。


Presto

目前Presto采用的内核,该内核在2007年Opera7中首次被使用,该引擎的特点就是渲染速度的优化达到了极致,也是目前公认 浏览器速度最快得浏览器内核,而代价是牺牲了网页的兼容性。实际上,这是一个动态内核,与前面几个内核的最大区别就是在脚本的处理上,Presto有着天生的优势,页面全部或者部分都能够在回应脚本事件等情况下被重新解析。此外,该内核在执行JavaScript的时候有着最快的速度,根据在同等条件下测试,Presto内核执行同等的JavaScript所需时间仅是Trident和Gecko内核的约1/3,(Trident内核最慢)。那次测试的时候因为Apple机的硬件条件和普通PC机器不同,没有进行webcore内核测试。只可惜Presto是商业引擎,使用Presto引擎除了Opera浏览器之外,还有NDSBrower、Will Internet Channke、Nokia 770等网络浏览器,这很大程度上限制了Presto的发展。***

WebkitWebkit

引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统的开发。 所以Webkit也是自由软件,同时开放源代码。在安全方面不受IE、Firefox的制约,所以Safari浏览器在国内还是很安全的。限于Mac OS X使用不广泛和Safari浏览器曾经只是Mac OS X的专属浏览器,这个内核本身应该说市场范围并不大;但似乎根据最新的浏览器调查表明,该浏览器的市场甚至已经超过了Opera和Presto,这一方面是由于苹果转到X86架构之后的人气暴涨,另外也是因为Safari 3终于推出了Windows版的缘故吧。Mac下还有OmniWeb、Shiira等人气很高的浏览器。google也chrome也使用webkit作为内核。Webkit内核在手机上应用也十分广泛,例如Google手机的Gphone、Apple的iphone、Nokia’s Series 60 brower等所使用的Brower内核引擎,都是基于Webkit。


手机浏览器

手机浏览器内核目前微软的Trident在移动终端上主要为WP系统内置浏览器,Webkit内核的适用范围则较为广泛,Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的。对于Android手机而言,使用率最高的就是Webkit内核,我们看到很多手机浏览器厂商都宣称有着自主内核,比如手机UC就号称采用了U3内核、而华为也经常标榜自己的天天浏览器采用了T9内核,事实上,他们都是基于开源内核Webkit进行二次开发的,并不是完全的自主内核。而在iOS以及WP7平台上,由于系统封闭,不允许除系统自带浏览器内核以外的浏览器内核进入,因此各家浏览器的开发均为在Safari或者IE内核的基础上进行二次开发,优化功能和自制UI。


JavaScript引擎

JavaScript引擎就是用来渲染JavaScript的。JavaScript的渲染速度越快,动态页面的展示也越快。Opera在JavaScript引擎的跑分上面一直都是很牛逼的,一般来说最新测试版之间PK,Opera基本都会夺冠。- chakra 查克拉,IE9启用的新的JavaScript引擎。- SpiderMonkey/TraceMonkey/JaegerMonkey SpiderMonkey应用在Mozilla Firefox 1.0-3.0,TraceMonkey应用在Mozilla Firefox 3.5-3.6版本,JaegerMonkey应用在Mozilla Firefox 4.0及后续的版本。- V8 应用与chrome- Nitro 应用于Safari 4及后续的版本。- 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及后续的版本。- KJS KHTML对应的JavaScript引擎。


出现了一些类似双核,三核的浏览器

balabala

tips- chrome/chromium

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

  • 页面兼容性判断 在确保IE浏览器没有损坏的基础上,搭配一款非Trident内核的浏览器进行判断,如果可以的话,最好所有内核都配齐了。 控制变量就能找到问题所在,是浏览器本身的问题,还是页面编码有问题。对于用户来说就能更好地去选择自己该用什么浏览器访问什么页面,对于开发者来说应该要写出无差别代码。
  • 这年头流行刷版本号 现在版本号最高的浏览器是Chrome,稳定版的版本号是14,也是现在主流浏览器里面诞生时间最短的,真是一个刷版本号高手。早期的Chrome版本更迭还会增加一些比较重要的新特性,比如扩展支持,现在的版本更迭基本上并没有伴随什么大的更新。现在很多伪高端用户就会整天追着第三方编译版本赶紧跟进版本号,但是其实真正的意义并不大。 多亏了Chrome的“提携”,今年Firefox也在猛刷版本号,年初还是3.x,现在正式版已经是7.0.1,每夜版已经到了10.0。Opera积累了多年才到11.50,测试版是12.0。IE的正式版是9,平台预览版是10。

浏览器渲染原理

Web页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。

//浏览器渲染原理
1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;   
2. 浏览器开始载入html代码,发现标签内有一个标签引用外部CSS文件;   
3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;   
4. 浏览器继续载入html中部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;   
5. 浏览器在代码中发现一个标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;   
6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;   
7. 浏览器发现了一个包含一行Javascript代码的
                    
                    

你可能感兴趣的:(浅谈浏览器内核以及渲染程度)