不一样内核浏览器的差别以及浏览器渲染简介

1、简单介绍一下什么是浏览器内核。

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过咱们通常习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。

因此，一般所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

不一样的浏览器内核对网页编写语法的解释也有不一样，所以同一网页在不一样的内核的浏览器里的渲染（显示）效果也可能不一样，这也是网页编写者须要在不一样内核的浏览器中测试网页显示效果的缘由。

 

浏览器内核不少，若是加上全部的几乎没有什么人在用的非商业的免费内核，那么可能大约有10款以上甚至更多，不过一般咱们比较常见的大约只有如下四种，下面先简单介绍一下。

 

Trident：

IE浏览器使用的内核，该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修 改而来的，并沿用到目前的IE9。

Trident其实是一款开放的内核，其接口内核设计的至关成熟，所以才有许多 采用IE内核而非IE的浏览器涌现（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。

此外， 为了方便也有不少人直接简称其为IE内核（固然也不排除有部分人是由于不知道内核名称而只好如此说）。

因为IE自己的“垄断性”（虽然名义上IE并不是垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来讲IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并无更新Trident内核，这致使了两个后果——一是Trident内核曾经几乎与W3C标准脱节（2005年），二是Trident内核的大量 Bug等安全性问题没有获得及时解决，而后加上一些致力于开源的开发者和一些学者们公开本身认为IE浏览器不安全的观点，也有不少用户转向了其余浏览器，Firefox和Opera就是这个时候兴起的。非Trident内核浏览器的市场占有率大幅提升也导致许多网页开发人员开始注意网页标准和非IE浏览器的浏览效果问题。

 

Gecko：

Netscape6开始采用的内核，后来的Mozilla FireFox (火狐浏览器) 也采用了该内核，Gecko的特色 是代码彻底公开，所以，其可开发程度很高，全世界的程序员均可觉得其编写代码，增长功能。

由于这是个开源 内核，所以受到许多人的青睐，Gecko内核的浏览器也不少，这也是Geckos内核虽然年轻但市场占有率可以迅速 提升的重要缘由。　　

事实上，Gecko引擎的由来跟IE不无关系，前面说过IE没有使用W3C的标准，这致使了微软内部一些开发人员的不满；他们与当时已经中止更新了的 Netscape的一些员工一块儿创办了Mozilla，以当时的Mosaic内核为基础 从新编写内核，因而开发出了Geckos。

不过事实上，Gecko 内核的浏览器仍然仍是Firefox (火狐) 用户最多， 因此有时也会被称为Firefox内核。

此外Gecko也是一个跨平台内核，能够在Windows、 BSD、Linux和Mac OS X 中使用。

 

Presto：

目前Opera采用的内核，该内核在2003年的Opera7中首次被使用，该款引擎的特色就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。　
　实际上这是一个动态内核，与前面几个内核的最大的区别就在脚本处理上，Presto有着天生的优点，页面的所有或者部分都可以在回应脚本事件时等状况下被从新解析。
此外该内核在执行Javascrīpt的时候有着最快的速度，根据在同等条件下的测试，Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3（Trident内核最慢，不过二者相差没有多大）。 那次测试的时候由于Apple机的硬件条件和普通PC机不一样因此没有测试WebCore内核。

只惋惜Presto是商业引擎，使用Presto的除开Opera之外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等，这很大程度上限制了Presto的发展。

 

Webkit：

苹果公司本身的内核，也是苹果的Safari浏览器使用的内核。

Webkit引擎包含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 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。

 

 

 // 好比检测一下猎豹浏览器（双核） http://ie.icoa.cn/

 

 

 

PC的浏览器内核主要就是这几个，那手机浏览器是基于什么内核呢？

目前微软的Trident在移动终端上主要为WP系统内置浏览器，Webkit内核的适用范围则较为普遍，Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的。

从实际状况出发：

对于Android手机而言，使用率最高的就是Webkit内核，咱们看到不少手机浏览器厂商都宣称有着自主内核，好比手机UC就号称采用了U3内核、而华为也常常标榜本身的每天浏览器采用了T9内核，事实上，他们都是基于开源内核Webkit进行二次开发的，并非彻底的自主内核。

而在iOS以及WP7平台上，因为系统封闭，不容许除系统自带浏览器内核之外的浏览器内核进入，所以各家浏览器的开发均为在Safari或者IE内核的基础上进行二次开发，优化功能和自制UI。

好比海豚、遨游等浏览器就是直接采用系统自带浏览器的内核，这点从这几款浏览器的HTML5评分与系统自带浏览器评分结果彻底一致就能够看出。

内核并没有手机与PC的区分，手机浏览器的内核与PC浏览器相似，例如：

• IE手机版和PC版都是Trident内核的；
• Opera手机版和PC版都是Presto内核的（自从2013年2月13日Opera宣布放弃Presto内核转向Webkit内核后，已出现部分Webkit内核的Opera手机浏览器测试版）；
• Firefox手机版和PC版都是Gecko内核的；
• Chrome、Safari手机版和PC版都是Webkit内核的。

至于国内的UC和QQ等手机浏览器也都是根据Webkit修改过来的内核。

 

 

---------------  另外一个关于浏览器内核的说明 -----------------

能够直接去  维基百科 看看 

 

1、排版引擎

    首先厘清一下浏览器内核是什么东西。

    英文叫作：Rendering Engine，中文翻译不少，排版引擎、解释引擎、渲染引擎，如今流行称为浏览器内核，至于为何流行这么称呼，请自行领悟。

    Rendering Engine，顾名思义，就是用来渲染网页内容的，将网页的内容和排版代码转换为可视的页面。由于是排版，因此确定会排版错位等问题。为何会排版错位呢？有的是因为网站自己编写不规范，有的是因为浏览器自己的渲染不标准。

    如今有几个主流的排版引擎，由于这些排版引擎都有其表明的浏览器，因此经常会把排版引擎的名称和浏览器的名称混用，好比常的说IE内核、Chrome内核。其实这样子是不太合理的，由于一个完整的浏览器不会只有一的排版引擎，还有本身的界面框架和其它的功能支撑，而排版引擎自己也不可能实现浏览器的全部功能。下面罗列一下几款主流的排版引擎和浏览器。

一、Trident（Windows）

    IE浏览器所使用的内核，也是不少浏览器所使用的内核，一般被称为IE内核。基于Trident内核的浏览器很是多，这是由于Trident内核提供了丰富的调用接口。老的Trident内核（好比常说的IE6内核）一直是不遵循W3C标准的，可是因为它的市场份额最大，因此后果就是大量的网站只支持老的Trident内核，依据W3C标准写的网页在老的Trident内核下面又出现误差。目前可供调用的最新版的Trident内核是IE9所用的内核，相较以前的版本对W3C标准的支持加强了不少。

Trident内核的浏览器：

IE六、IE七、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；

世界之窗一、世界之窗二、世界之窗3；

360安全浏览器一、360安全浏览器二、360安全浏览器三、360安全浏览器四、360安全浏览器5；

傲游一、傲游2；搜狗浏览器1；腾讯TT；阿云浏览器（早期版本）、百度浏览器（早期版本）、瑞星安全浏览器、Slim Browser；

GreenBrowser、爱帆浏览器（12 以前版本）、115浏览器、155浏览器；

闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器；

二、Gecko（跨平台）

    Netscape6启用的内核，如今主要由Mozilla基金会进行维护，是开源的浏览器内核，目前最主流的Gecko内核浏览器是Mozilla Firefox，因此也经常称之为火狐内核。由于Firefox的出现，IE的霸主地位逐步被削弱，Chrome的出现则是加速了这个进程。非Trident内核的兴起正在改变着整个互联网，最直接的就是推进了编码的标准化，也使得微软在竞争压力下不得不改进IE。不过比较惋惜的是，虽然是开源的，也开发了这么多年，基于Gecko的浏览器并很少见，除了一些简单的改动（坑爹的X浏览器）或者是从新编译（绫川ayakawa、tete009），深度定制或者加强型外壳的还比较少见。另外就是有一些其它软件借用了Gecko内核，好比音乐管理软件SongBird。

常见的Gecko内核的浏览器

Mozilla Firefox、Mozilla SeaMonkey

Epiphany（早期版本）、Flock（早期版本）、K-Meleon

三、KHTML（Linux）

    KDE开发的内核，速度快捷，容错度低。这个内核可能不见得不少人知道，可是后面再看下去你就明白了。

    常见的KHTML内核的浏览器：Konqueror

四、WebKit（跨平台）

    由KHTML发展而来，也是苹果给开源世界的一大贡献。是目前最火热的浏览器内核，火热倒不是说市场份额，而是应用的面积和势头。由于是脱胎于KHTML，因此也是具备高速的特色，一样遵循W3C标准。

    常见的WebKit内核的浏览器：Apple Safari、Symbian系统浏览器

五、Chromium（跨平台）

    维基百科里面并无将Chromium从WebKit分出来，这个区分彻底是基于我我的的恶趣味。记得之前看过一个大牛的博文说过，Chromium把WebKit的代码梳理得可读性提升不少，因此之前可能须要一天进行编译的代码，如今只要两个小时就能搞定。这个我本身也没有考究过，可是估计可信。这个也能解释为何Gecko和WebKit出来了这么久，第三方编译、定制的版本并很少，可是由Chromium衍生出来的浏览器早就满坑满谷了。

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

六、Presto（跨平台）

    Opera的内核，准确地说，是Opera 7.0及之后版本的内核，Opera 3.5-6.1版本使用的内核叫作Elektra。不用说，Presto对W3C标准的支持也是很良好的。虽然我很喜欢Opera，可是我对Presto的渲染速度一直有保留态度。以前在OperaChina论坛看见有人说过，Presto优先解析文字，保证可阅读性，媒体资源的渲染放后。

    常见的Presto内核的浏览器：Opera

七、其它

http://zh.wikipedia.org/wiki/排版引擎

 

2、JavaScript引擎

 

    说完了排版引擎，接下来讲说JavaScript引擎。顾名思义，JavaScript引擎就是用来渲染JavaScript的。

为何要单独拿出来讲呢？由于它涉及到跑分。常常看见不少文章在报道说哪一个浏览器更快，其实大部分说的就是JavaScript的渲染速度，而不是页面的载入速度。在网速许可的状况下，其实各个浏览器的页面载入速度差异不大（Opera逊色一些）。那是否是说对比JavaScript的渲染速度其实没有意义？也不是这么说，由于如今JavaScript在页面中的比重会愈来愈大，愈来愈多的动态页面开始大量借助JavaScript，好比如今主流的SNS、邮箱、网页游戏，因此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、傲游3。

四、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引擎。

 

3、几个测试

 

一、V8引擎

http://v8.googlecode.com/svn/data/benchmarks/v6/run.html

    如今不少“双核”浏览器都用它来跑分测试JavaScript引擎，分数越高越好。

二、Acid3

http://acid3.acidtests.org/

    标准支持测试，分数越高越好，满分是100分。

三、HTML5

http://www.html5test.com/

    测试浏览器对HTML5标准的支持，分数越高越好。

 

4、几个奇葩

 

一、IETab

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

二、Trident/Gecko双核浏览器

    虽然IETab能实现部分需求，可是深度订制的毕竟仍是不同，因此Trident/Gecko双核浏览器就诞生了，Sleipnir、Avant 12（Orca）是这类里面比较常见的。Avant 12由于有Orca的前期积累，因此轻车熟路，后面还打算加入Chromium，变成三核浏览器，可是恰恰如今Mozilla Firefox和Chrome都在疯狂刷版本号，确定有一部分精力要花在跟进版本上。

三、Trident/WebKit双核浏览器

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

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

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

 

 

5、几个小点

 

一、Chrome/Chromium

    不少人都会说本身用的双核浏览器是Chrome/IE双核的，或者说是基于Chrome的。其实这种说法并不正确，由于Chrome自己并不开源，其它厂商是不能去定制Chrome的。能被修改、定制的是Chromium，Chrome的开源开发版本，代码和Build都提供下载。Chromium/Chrome两个单词都是铬，分别是拉丁文和英文，除了名字以外，颇有不少不一样，你能够本身对比一下。

    Chromium一天最多能够更新十几二十个版本，实验性的新特性都会如今这里放出，可是Chromium自己其实并不稳定。

    Chrome总共有四个更新分支：Canary、Dev、Beta、Stable，稳定性依次加强。

二、MyIE、MyIE二、傲游、GreenBrowser

    自行搜索，一段历史。

三、页面兼容性判断

    在确保IE浏览器没有损坏的基础上，搭配一款非Trident内核的浏览器进行判断，若是能够的话，最好全部内核都配齐了。

    控制变量就能找到问题所在，是浏览器自己的问题，仍是页面编码有问题。对于用户来讲就能更好地去选择本身该用什么浏览器访问什么页面，对于开发者来讲应该要写出无差异代码。

四、一直被模仿，一直被超越的Opera

Opera其实很好看也很好用，并且极度创新，可是市场占有率一直很低。不少很好用的新特性老是被抄袭，因此你们笑称Opera“一直被模仿，一直被超越”。坊间传闻多标签页浏览器就是Opera发明的，可是貌似有人考究了这个传闻其实不属实。不过快速拨号、Turbo浏览等功能就是扎扎实实Opera独创的。你能够不用Opera，可是你会损失不少乐趣。

五、这年头流行刷版本号

如今版本号最高的浏览器是Chrome，稳定版的版本号是14，也是如今主流浏览器里面诞生时间最短的，真是一个刷版本号高手。早期的Chrome版本更迭还会增长一些比较重要的新特性，好比扩展支持，如今的版本更迭基本上并无伴随什么大的更新。如今不少伪高端用户就会成天追着第三方编译版本赶忙跟进版本号，可是其实真正的意义并不大。

多亏了Chrome的“提携”，今年Firefox也在猛刷版本号，年初仍是3.x，如今正式版已是7.0.1，每夜版已经到了10.0。Opera积累了多年才到11.50，测试版是12.0。IE的正式版是9，平台预览版是10。

六、查看源代码、开发者工具

通常来讲，查看源代码和使用开发者工具是比较实用的，可能用的机会并很少，可是在判断一些问题的时候实际上是颇有用的。经过查看源代码或者使用开发者工具，能够大体了解这些网站里面的一些元素或者加载的脚本或者是规则，对于判断兼容性问题有必定的帮助，也能够用来准确捕捉页面元素。

七、几个主要的浏览器官网以及版本下载

（1）Internet Explorer

官网：

http://windows.microsoft.com/zh-CN/internet-explorer/products/ie/home

IE7下载：

http://www.microsoft.com/downloads/zh-cn/details.aspx?displaylang=zh-cn&FamilyID=9ae91ebe-3385-447c-8a30-081805b2f90b

IE8下载：

http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-8

IE9下载：

http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-9/worldwide-languages

（2）Mozilla Firefox

官网：

http://firefox.com.cn/

7.x Release：

http://releases.mozilla.org/pub/mozilla.org/firefox/releases/latest/win32/zh-CN/

8.x Candidates：

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/8.0b1-candidates/build1/win32/zh-CN/

9.x Aurora：

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora/

10.x Nightly：

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

（3）Apple Safari

官网：

http://www.apple.com.cn/safari/

下载：

http://www.apple.com.cn/safari/download/

（4）Chromium

官网：

http://www.chromium.org/

下载：

http://build.chromium.org/f/chromium/snapshots/Win_Webkit_Latest/

（5）Google Chrome

官网：

http://www.google.com/chrome?hl=zh-cn

Stable在线安装包：

http://www.google.com/chrome/eula.html?hl=zh-cn

Beta在线安装包：

http://www.google.com/chrome/eula.html?hl=zh-CN&extra=betachannel

Dev在线安装包：

http://www.google.com/chrome/eula.html?hl=zh-CN&extra=devchannel

Canary在线安装包：

http://www.google.com/chrome/eula.html?hl=zh-CN&extra=canarychannel

Stable离线安装包：

http://www.google.com/chrome/eula.html?hl=zh-CN&standalone=1

Beta离线安装包：

http://www.google.com/chrome/eula.html?hl=zh-CN&standalone=1&extra=betachannel

Dev离线安装包：

http://www.google.com/chrome/eula.html?hl=zh-CN&standalone=1&extra=devchannel

Canary离线安装包：

http://www.google.com/chrome/eula.html?hl=zh-CN&standalone=1&extra=canarychannel

（6）Opera

官网：

http://www.opera.com/

正式版：

http://www.opera.com/download/

测试版：

http://snapshot.opera.com/windows/latest

 

----------------- 隔 ----------------

 

 

 

 

2、浏览器渲染原理

 

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

先来大体了解一下浏览器都是怎么干活的： 　　

1. 用户输入网址（假设是个html页面，而且是第一次访问），浏览器向服务器发出请求，服务器返回html文件； 　　

2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件； 　　

3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件； 　　

4. 浏览器继续载入html中<body>部分的代码，而且CSS文件已经拿到手了，能够开始渲染页面了； 　　

5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码； 　　

6. 服务器返回图片文件，因为图片占用了必定面积，影响了后面段落的排布，所以浏览器须要回过头来从新渲染这部分代码； 　　

7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它； 　　

8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个（style.display=”none”）。杯具啊，忽然就少了这么一个元素，浏览器不得不从新渲染这部分代码； 　　

9. 终于等到了</html>的到来，浏览器泪流满面…… 　　

10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径； 　　

11. 浏览器召集了在座的各位

<span><ul><li>们，“大伙儿收拾收拾行李，咱得从新来过……”，浏览器向服务器请求了新的CSS文件，从新渲染页面。

 

 

　　浏览器天天就这么来来回回跑着，要知道不一样的人写出来的html和css代码质量良莠不齐，说不定哪天跑着跑着就挂掉了。

好在这个世界还有这么一群人——页面重构工程师，平时挺不起眼，也就帮视觉设计师们切切图啊改改字，其实背地里仍是干了很多实事的。

说到页面为何会慢？那是由于浏览器要花时间、花精力去渲染，尤为是当它发现某个部分发生了点变化影响了布局，须要倒回去从新渲染，内行称这个回退的过程叫reflow。

 

　　 reflow几乎是没法避免的。如今界面上流行的一些效果，好比树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引发浏览器的 reflow。

鼠标滑过、点击……只要这些行为引发了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引发它内部、周围甚至整个页面的从新渲染。

一般咱们都没法预估浏览器到底会reflow哪一部分的代码，它们都彼此相互影响着。

　　 reflow问题是能够优化的，咱们能够尽可能减小没必要要的reflow。

好比开头的例子中的<img>图片载入问题，这其实就是一个能够避免的reflow——给图片设置宽度和高度就能够了。

这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。

另外，有个和reflow看上去差很少的术语：repaint，中文叫重绘。

若是只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引发浏览器repaint。

repaint的速度明显快于 reflow（在IE下须要换一下说法，reflow要比repaint 更缓慢）。

 

 

3、从浏览器的渲染原理讲CSS性能

 

平时咱们几乎天天都在和浏览器打交道，写出来的页面颇有可能在不一样的浏览器下显示的不同。苦逼的前端攻城师们为了兼容各个浏览器而不断地去测试和调试，还在脑子中记下各类遇到的BUG及解决方案，而咱们好像并无去主动地关注和了解下浏览器的工做原理。

若是咱们对此作一点了解，我想在项目过程当中就能够根据它有效的避免一些问题以及对页面性能作出相应的改进。

今天咱们主要根据浏览器的渲染原理对CSS的书写性能作一点改进（固然还有JS本篇文章暂不考虑，后面的文章会作介绍），下面让咱们一块儿来揭开浏览器的渲染原理这一神秘的面纱吧：

最终决定浏览器表现出来的页面效果的差别是：渲染引擎 Rendering Engine（也叫作排版引擎），也就是咱们一般所说的“浏览器内核”，负责解析网页语法（如HTML、JavaScript）并渲染、展现网页。相同的代码在不一样的浏览器呈现出来的效果不同，那么就颇有多是不一样的浏览器内核致使的。

咱们来看一下加载页面时浏览器的具体工做流程（图一）：

（图一）

一、解析HTML以重建DOM树（Parsing HTML to construct the DOM tree ）：渲染引擎开始解析HTML文档，转换树中的标签到DOM节点，它被称为“内容树”。

二、构建渲染树（Render tree construction）：解析CSS（包括外部CSS文件和样式元素），根据CSS选择器计算出节点的样式，建立另外一个树 —- 渲染树。

三、布局渲染树（Layout of the render tree）: 从根节点递归调用，计算每个元素的大小、位置等，给每一个节点所应该出如今屏幕上的精确坐标。

四、绘制渲染树（Painting the render tree） : 遍历渲染树，每一个节点将使用UI后端层来绘制。

主要的流程就是：构建一个dom树，页面要显示的各元素都会建立到这个dom树当中，每当一个新元素加入到这个dom树当中，浏览器便会经过css引擎查遍css样式表，找到符合该元素的样式规则应用到这个元素上。

注意了：css引擎查找样式表，对每条规则都按从右到左的顺序去匹配。

看以下规则：

1	#nav  li {}

看起来很快，实际上很慢，尽管这让人有点费解#_#。

咱们中的大多数人，尤为是那些从左到右阅读的人，可能猜测浏览器也是执行从左到右匹配规则的，所以会推测这条规则的开销并不高。

在脑海中，咱们想象浏览器会像这样工做：找到惟一的ID为nav的元素，而后把这个样式应用到直系子元素的li元素上。

咱们知道有一个ID为nav的元素，而且它只有几个Li子元素，因此这个CSS选择符应该至关高效。

事实上，CSS选择符是从右到左进行匹配的。了解这方面的知识后，咱们知道这个以前看似高效地规则实际开销至关高，浏览器必须遍历页面上每一个li元素并肯定其父元素的id是否为nav。

1

*{}

额，这种方法我刚写CSS的也写过，却不知这种效率是差到极点的作法，由于*通配符将匹配全部元素，因此浏览器必须去遍历每个元素，这样的计算次数多是上万次！

1	ul#nav{} ul.nav{}

在页面中一个指定的ID只能对应一个元素，因此没有必要添加额外的限定符，并且这会使它更低效。同时也不要用具体的标签限定类选择符，而是要根据实际的状况对类名进行扩展。例如把ul.nav改为.main_nav更好。

1	ul li li li .nav_item{}

对于这样的选择器，以前也写过，最后本身也数不过来有多少后代选择器了，何不用一个类来关联最后的标签元素，如.extra_navitem，这样只须要匹配class为extra_navitem的元素，效率明显提高了

对此，在CSS书写过程当中，总结出以下性能提高的方案：

1. 避免使用通配规则      如    *{} 计算次数惊人！只对须要用到的元素进行选择
2. 尽可能少的去对标签进行选择，而是用class     如：#nav li{},能够为li加上nav_item的类名，以下选择.nav_item{}
3. 不要去用标签限定ID或者类选择符   如：ul#nav,应该简化为#nav
4. 尽可能少的去使用后代选择器，下降选择器的权重值  后代选择器的开销是最高的，尽可能将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每个标签元素
5. 考虑继承 了解哪些属性是能够经过继承而来的，而后避免对这些属性重复指定规则

选用高效的选择符，能够减小页面的渲染时间，从而有效的提高用户体验（页面越快，用户固然越喜欢^_^）,你能够看一下CSS selectors Test，这个实验的重点是评估复杂选择符和简单选择符的开销。

也许当你想让渲染速度最高效时，你可能会给每一个独立的标签配置一个ID，而后用这些ID写样式。那的确会超级快，也超级荒唐！这样的结果是语义极差，后期的维护难到了极点。

但说到底，CSS性能这东西对于小的项目来说可能真的是微乎其微的东西，提高可能也不是很明显，但对于大型的项目确定是有帮助的。并且一个好的CSS书写习惯和方式可以帮助咱们更加严谨的要求本身。

 

 

转载地址 http://www.cnblogs.com/imwtr/p/4481092.html

若是有兴趣，你们能够去逛逛原博，干活满满的。