前言

轉(zhuǎn)自博客園

原文

一、簡(jiǎn)單介紹一下什么是瀏覽器內(nèi)核。
瀏覽器最重要或者說核心的部分是“Rendering Engine”，可大概譯為“解釋引擎”，不過我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”。負(fù)責(zé)對(duì)網(wǎng)頁語法的解釋（如HTML、JavaScript）并渲染（顯示）網(wǎng)頁。
所以，通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。
不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁編寫語法的解釋也有不同，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同，這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測(cè)試網(wǎng)頁顯示效果的原因。

瀏覽器內(nèi)核很多，如果加上所有的幾乎沒有什么人在用的非商業(yè)的免費(fèi)內(nèi)核，那么可能大約有10款以上甚至更多，不過通常我們比較常見的大約只有以下四種，下面先簡(jiǎn)單介紹一下。

Trident：
IE瀏覽器使用的內(nèi)核，該內(nèi)核程序在1997年的IE4中首次被采用，是微軟在Mosaic代碼的基礎(chǔ)之上修 改而來的，并沿用到目前的IE9。
Trident實(shí)際上是一款開放的內(nèi)核，其接口內(nèi)核設(shè)計(jì)的相當(dāng)成熟，因此才有許多 采用IE內(nèi)核而非IE的瀏覽器涌現(xiàn)（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。
此外， 為了方便也有很多人直接簡(jiǎn)稱其為IE內(nèi)核（當(dāng)然也不排除有部分人是因?yàn)椴恢纼?nèi)核名稱而只好如此說）。
由于IE本身的“壟斷性”（雖然名義上IE并非壟斷，但實(shí)際上，特別是從Windows 95年代一直到XP初期，就市場(chǎng)占有率來說IE的確借助Windows的東風(fēng)處于“壟斷”的地位）而使得Trident內(nèi)核的長(zhǎng)期一家獨(dú)大，微軟很長(zhǎng)時(shí)間都并沒有更新Trident內(nèi)核，這導(dǎo)致了兩個(gè)后果——一是Trident內(nèi)核曾經(jīng)幾乎與W3C標(biāo)準(zhǔn)脫節(jié)（2005年），二是Trident內(nèi)核的大量 Bug等安全性問題沒有得到及時(shí)解決，然后加上一些致力于開源的開發(fā)者和一些學(xué)者們公開自己認(rèn)為IE瀏覽器不安全的觀點(diǎn)，也有很多用戶轉(zhuǎn)向了其他瀏覽器，F(xiàn)irefox和Opera就是這個(gè)時(shí)候興起的。非Trident內(nèi)核瀏覽器的市場(chǎng)占有率大幅提高也致使許多網(wǎng)頁開發(fā)人員開始注意網(wǎng)頁標(biāo)準(zhǔn)和非IE瀏覽器的瀏覽效果問題。

Gecko：
Netscape6開始采用的內(nèi)核，后來的Mozilla FireFox (火狐瀏覽器) 也采用了該內(nèi)核，Gecko的特點(diǎn) 是代碼完全公開，因此，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。
因?yàn)檫@是個(gè)開源 內(nèi)核，因此受到許多人的青睞，Gecko內(nèi)核的瀏覽器也很多，這也是Geckos內(nèi)核雖然年輕但市場(chǎng)占有率能夠迅速 提高的重要原因。　　
事實(shí)上，Gecko引擎的由來跟IE不無關(guān)系，前面說過IE沒有使用W3C的標(biāo)準(zhǔn)，這導(dǎo)致了微軟內(nèi)部一些開發(fā)人員的不滿；他們與當(dāng)時(shí)已經(jīng)停止更新了的 Netscape的一些員工一起創(chuàng)辦了Mozilla，以當(dāng)時(shí)的Mosaic內(nèi)核為基礎(chǔ) 重新編寫內(nèi)核，于是開發(fā)出了Geckos。
不過事實(shí)上，Gecko 內(nèi)核的瀏覽器仍然還是Firefox (火狐) 用戶最多， 所以有時(shí)也會(huì)被稱為Firefox內(nèi)核。
此外Gecko也是一個(gè)跨平臺(tái)內(nèi)核，可以在Windows、 BSD、Linux和Mac OS X 中使用。

Presto：
目前Opera采用的內(nèi)核，該內(nèi)核在2003年的Opera7中首次被使用，該款引擎的特點(diǎn)就是渲染速度的優(yōu)化達(dá)到了極致，也是目前公認(rèn)網(wǎng)頁瀏覽速度最快的瀏覽器內(nèi)核，然而代價(jià)是犧牲了網(wǎng)頁的兼容性。　　實(shí)際上這是一個(gè)動(dòng)態(tài)內(nèi)核，與前面幾個(gè)內(nèi)核的最大的區(qū)別就在腳本處理上，Presto有著天生的優(yōu)勢(shì)，頁面的全部或者部分都能夠在回應(yīng)腳本事件時(shí)等情況下被重新解析。此外該內(nèi)核在執(zhí)行Javascrīpt的時(shí)候有著最快的速度，根據(jù)在同等條件下的測(cè)試，Presto內(nèi)核執(zhí)行同等Javascrīpt所需的時(shí)間僅有Trident和Gecko內(nèi)核的約1/3（Trident內(nèi)核最慢，不過兩者相差沒有多大）。 那次測(cè)試的時(shí)候因?yàn)锳pple機(jī)的硬件條件和普通PC機(jī)不同所以沒有測(cè)試WebCore內(nèi)核。
只可惜Presto是商業(yè)引擎，使用Presto的除開Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770網(wǎng)絡(luò)瀏覽器等，這很大程度上限制了Presto的發(fā)展。

Webkit：
蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。
Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟件，在GPL條約下授權(quán)，同時(shí)支持BSD系統(tǒng)的開發(fā)。 所以Webkit也是自由軟件，同時(shí)開放源代碼。在安全方面不受IE、Firefox的制約，所以Safari瀏覽器在國(guó)內(nèi)還是很安全的。　　限于Mac OS X的使用不廣泛和Safari瀏覽器曾經(jīng)只是Mac OS X的專屬瀏覽器，這個(gè)內(nèi)核本身應(yīng)該說市場(chǎng)范圍并不大；但似乎根據(jù)最新的瀏覽器調(diào)查表明，該瀏覽器的市場(chǎng)甚至已經(jīng)超過了Opera的Presto了——當(dāng)然這一方面得益于蘋果轉(zhuǎn)到x86架構(gòu)之后的人氣暴漲，另外也是因?yàn)镾afari 3終于推出了Windows版的緣故吧。Mac下還有OmniWeb、Shiira等人氣很高的瀏覽器。　　google的chrome也使用webkit作為內(nèi)核。　 　WebKit 內(nèi)核在手機(jī)上的應(yīng)用也十分廣泛，例如 Google 的手機(jī) Gphone、 Apple 的 iPhone， Nokia’s Series 60 browser 等所使用的 Browser 內(nèi)核引擎，都是基于 WebKit。

// 比如檢測(cè)一下獵豹瀏覽器（雙核） http://ie.icoa.cn/

PC的瀏覽器內(nèi)核主要就是這幾個(gè)，那手機(jī)瀏覽器是基于什么內(nèi)核呢？
目前微軟的Trident在移動(dòng)終端上主要為WP系統(tǒng)內(nèi)置瀏覽器，Webkit內(nèi)核的適用范圍則較為廣泛，Android原生瀏覽器、蘋果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit開源內(nèi)核開發(fā)的。
從實(shí)際情況出發(fā)：
對(duì)于Android手機(jī)而言，使用率最高的就是Webkit內(nèi)核，我們看到很多手機(jī)瀏覽器廠商都宣稱有著自主內(nèi)核，比如手機(jī)UC就號(hào)稱采用了U3內(nèi)核、而華為也經(jīng)常標(biāo)榜自己的天天瀏覽器采用了T9內(nèi)核，事實(shí)上，他們都是基于開源內(nèi)核Webkit進(jìn)行二次開發(fā)的，并不是完全的自主內(nèi)核。
而在iOS以及WP7平臺(tái)上，由于系統(tǒng)封閉，不允許除系統(tǒng)自帶瀏覽器內(nèi)核以外的瀏覽器內(nèi)核進(jìn)入，因此各家瀏覽器的開發(fā)均為在Safari或者IE內(nèi)核的基礎(chǔ)上進(jìn)行二次開發(fā)，優(yōu)化功能和自制UI。
比如海豚、遨游等瀏覽器就是直接采用系統(tǒng)自帶瀏覽器的內(nèi)核，這點(diǎn)從這幾款瀏覽器的HTML5評(píng)分與系統(tǒng)自帶瀏覽器評(píng)分結(jié)果完全一致就可以看出。
內(nèi)核并無手機(jī)與PC的區(qū)分，手機(jī)瀏覽器的內(nèi)核與PC瀏覽器類似，例如：
IE手機(jī)版和PC版都是Trident內(nèi)核的；
Opera手機(jī)版和PC版都是Presto內(nèi)核的（自從2013年2月13日Opera宣布放棄Presto內(nèi)核轉(zhuǎn)向Webkit內(nèi)核后，已出現(xiàn)部分Webkit內(nèi)核的Opera手機(jī)瀏覽器測(cè)試版）；
Firefox手機(jī)版和PC版都是Gecko內(nèi)核的；
Chrome、Safari手機(jī)版和PC版都是Webkit內(nèi)核的。

至于國(guó)內(nèi)的UC和QQ等手機(jī)瀏覽器也都是根據(jù)Webkit修改過來的內(nèi)核。

---------------** 另一個(gè)關(guān)于瀏覽器內(nèi)核的說明** -----------------
可以直接去 維基百科 看看

一、排版引擎
首先厘清一下瀏覽器內(nèi)核是什么東西。
英文叫做：Rendering Engine，中文翻譯很多，排版引擎、解釋引擎、渲染引擎，現(xiàn)在流行稱為瀏覽器內(nèi)核，至于為什么流行這么稱呼，請(qǐng)自行領(lǐng)悟。
Rendering Engine，顧名思義，就是用來渲染網(wǎng)頁內(nèi)容的，將網(wǎng)頁的內(nèi)容和排版代碼轉(zhuǎn)換為可視的頁面。因?yàn)槭桥虐妫钥隙〞?huì)排版錯(cuò)位等問題。為什么會(huì)排版錯(cuò)位呢？有的是由于網(wǎng)站本身編寫不規(guī)范，有的是由于瀏覽器本身的渲染不標(biāo)準(zhǔn)。
現(xiàn)在有幾個(gè)主流的排版引擎，因?yàn)檫@些排版引擎都有其代表的瀏覽器，所以常常會(huì)把排版引擎的名稱和瀏覽器的名稱混用，比如常的說IE內(nèi)核、Chrome內(nèi)核。其實(shí)這樣子是不太合理的，因?yàn)橐粋€(gè)完整的瀏覽器不會(huì)只有一的排版引擎，還有自己的界面框架和其它的功能支撐，而排版引擎本身也不可能實(shí)現(xiàn)瀏覽器的所有功能。下面羅列一下幾款主流的排版引擎和瀏覽器。
1、Trident（Windows）
IE瀏覽器所使用的內(nèi)核，也是很多瀏覽器所使用的內(nèi)核，通常被稱為IE內(nèi)核。基于Trident內(nèi)核的瀏覽器非常多，這是因?yàn)門rident內(nèi)核提供了豐富的調(diào)用接口。老的Trident內(nèi)核（比如常說的IE6內(nèi)核）一直是不遵循W3C標(biāo)準(zhǔn)的，但是由于它的市場(chǎng)份額最大，所以后果就是大量的網(wǎng)站只支持老的Trident內(nèi)核，依據(jù)W3C標(biāo)準(zhǔn)寫的網(wǎng)頁在老的Trident內(nèi)核下面又出現(xiàn)偏差。目前可供調(diào)用的最新版的Trident內(nèi)核是IE9所用的內(nèi)核，相較之前的版本對(duì)W3C標(biāo)準(zhǔn)的支持增強(qiáng)了很多。
Trident內(nèi)核的瀏覽器：
IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；
世界之窗1、世界之窗2、世界之窗3；
360安全瀏覽器1、360安全瀏覽器2、360安全瀏覽器3、360安全瀏覽器4、360安全瀏覽器5；
傲游1、傲游2；搜狗瀏覽器1；騰訊TT；阿云瀏覽器（早期版本）、百度瀏覽器（早期版本）、瑞星安全瀏覽器、Slim Browser；
GreenBrowser、愛帆瀏覽器（12 之前版本）、115瀏覽器、155瀏覽器；
閃游瀏覽器、N氧化碳瀏覽器、糖果瀏覽器、彩虹瀏覽器、瑞影瀏覽器、勇者無疆瀏覽器、114瀏覽器、螞蟻瀏覽器、飛騰瀏覽器、速達(dá)瀏覽器、佐羅瀏覽器；
2、Gecko（跨平臺(tái)）
Netscape6啟用的內(nèi)核，現(xiàn)在主要由Mozilla基金會(huì)進(jìn)行維護(hù)，是開源的瀏覽器內(nèi)核，目前最主流的Gecko內(nèi)核瀏覽器是Mozilla Firefox，所以也常常稱之為火狐內(nèi)核。因?yàn)镕irefox的出現(xiàn)，IE的霸主地位逐步被削弱，Chrome的出現(xiàn)則是加速了這個(gè)進(jìn)程。非Trident內(nèi)核的興起正在改變著整個(gè)互聯(lián)網(wǎng)，最直接的就是推動(dòng)了編碼的標(biāo)準(zhǔn)化，也使得微軟在競(jìng)爭(zhēng)壓力下不得不改進(jìn)IE。不過比較可惜的是，雖然是開源的，也開發(fā)了這么多年，基于Gecko的瀏覽器并不多見，除了一些簡(jiǎn)單的改動(dòng)（坑爹的X瀏覽器）或者是重新編譯（綾川ayakawa、tete009），深度定制或者增強(qiáng)型外殼的還比較少見。另外就是有一些其它軟件借用了Gecko內(nèi)核，比如音樂管理軟件SongBird。
常見的Gecko內(nèi)核的瀏覽器
Mozilla Firefox、Mozilla SeaMonkey
Epiphany（早期版本）、Flock（早期版本）、K-Meleon
3、KHTML（Linux）
KDE開發(fā)的內(nèi)核，速度快捷，容錯(cuò)度低。這個(gè)內(nèi)核可能不見得很多人知道，但是后面再看下去你就明白了。
** 常見的KHTML內(nèi)核的瀏覽器：**Konqueror
4、WebKit（跨平臺(tái)）
由KHTML發(fā)展而來，也是蘋果給開源世界的一大貢獻(xiàn)。是目前最火熱的瀏覽器內(nèi)核，火熱倒不是說市場(chǎng)份額，而是應(yīng)用的面積和勢(shì)頭。因?yàn)槭敲撎ビ贙HTML，所以也是具有高速的特點(diǎn)，同樣遵循W3C標(biāo)準(zhǔn)。
常見的WebKit內(nèi)核的瀏覽器：Apple Safari、Symbian系統(tǒng)瀏覽器
5、Chromium（跨平臺(tái)）
維基百科里面并沒有將Chromium從WebKit分出來，這個(gè)區(qū)分完全是基于我個(gè)人的惡趣味。記得以前看過一個(gè)大牛的博文說過，Chromium把WebKit的代碼梳理得可讀性提高很多，所以以前可能需要一天進(jìn)行編譯的代碼，現(xiàn)在只要兩個(gè)小時(shí)就能搞定。這個(gè)我自己也沒有考究過，但是估計(jì)可信。這個(gè)也能解釋為什么Gecko和WebKit出來了這么久，第三方編譯、定制的版本并不多，但是由Chromium衍生出來的瀏覽器早就滿坑滿谷了。
常見的Chromium內(nèi)核的瀏覽器：Chromium、Google Chrome、SRWare Iron、Comodo Dragon
6、Presto（跨平臺(tái)）
Opera的內(nèi)核，準(zhǔn)確地說，是Opera 7.0及以后版本的內(nèi)核，Opera 3.5-6.1版本使用的內(nèi)核叫做Elektra。不用說，Presto對(duì)W3C標(biāo)準(zhǔn)的支持也是很良好的。雖然我很喜歡Opera，但是我對(duì)Presto的渲染速度一直有保留態(tài)度。之前在OperaChina論壇看見有人說過，Presto優(yōu)先解析文字，保證可閱讀性，媒體資源的渲染放后。
常見的Presto內(nèi)核的瀏覽器：Opera
7、其它
http://zh.wikipedia.org/wiki/排版引擎

二、JavaScript引擎

說完了排版引擎，接下來說說JavaScript引擎。顧名思義，JavaScript引擎就是用來渲染JavaScript的。

為什么要單獨(dú)拿出來說呢？因?yàn)樗婕暗脚芊帧＝?jīng)常看見很多文章在報(bào)道說哪個(gè)瀏覽器更快，其實(shí)大部分說的就是JavaScript的渲染速度，而不是頁面的載入速度。在網(wǎng)速許可的情況下，其實(shí)各個(gè)瀏覽器的頁面載入速度差別不大（Opera遜色一些）。那是不是說對(duì)比JavaScript的渲染速度其實(shí)沒有意義？也不是這么說，因?yàn)楝F(xiàn)在JavaScript在頁面中的比重會(huì)越來越大，越來越多的動(dòng)態(tài)頁面開始大量借助JavaScript，比如現(xiàn)在主流的SNS、郵箱、網(wǎng)頁游戲，所以JavaScript的渲染速度也是一個(gè)很重要的指標(biāo)。
JavaScript的渲染速度越快，動(dòng)態(tài)頁面的展示也越快。Opera在JavaScript引擎的跑分上面一直都是很牛逼的，一般來說最新測(cè)試版之間PK，Opera基本都會(huì)奪冠。
1、Chakra
查克拉，IE9啟用的新的JavaScript引擎。
2、SpiderMonkey/TraceMonkey/JaegerMonkey
SpiderMonkey應(yīng)用在Mozilla Firefox 1.0-3.0，TraceMonkey應(yīng)用在Mozilla Firefox 3.5-3.6版本，JaegerMonkey應(yīng)用在Mozilla Firefox 4.0及后續(xù)的版本。
3、V8
應(yīng)用于Chrome、傲游3。
4、Nitro
應(yīng)用于Safari 4及后續(xù)的版本。
5、Linear A/Linear B/Futhark/Carakan
Linear A應(yīng)用于Opera 4.0-6.1版本，Linear B應(yīng)用于Opera 7.0～9.2版本，F(xiàn)uthark應(yīng)用于Opera 9.5-10.2版本，Carakan應(yīng)用于Opera 10.5及后續(xù)的版本。
6、KJS
KHTML對(duì)應(yīng)的JavaScript引擎。

三、幾個(gè)測(cè)試

1、V8引擎
http://v8.googlecode.com/svn/data/benchmarks/v6/run.html
現(xiàn)在很多“雙核”瀏覽器都用它來跑分測(cè)試JavaScript引擎，分?jǐn)?shù)越高越好。
2、Acid3
http://acid3.acidtests.org/
標(biāo)準(zhǔn)支持測(cè)試，分?jǐn)?shù)越高越好，滿分是100分。
3、HTML5
http://www.html5test.com/
測(cè)試瀏覽器對(duì)HTML5標(biāo)準(zhǔn)的支持，分?jǐn)?shù)越高越好。

四、幾個(gè)奇葩

1、IETab
在沒有第三方編譯版本的時(shí)候，IETab一直是Mozilla Firefox、Chrome等非Trident內(nèi)核的瀏覽器的安裝量最大的擴(kuò)展之一，方便用戶在不開啟IE的情況下調(diào)用Trident內(nèi)核訪問一些兼容性比較差的網(wǎng)站。
2、Trident/Gecko雙核瀏覽器
雖然IETab能實(shí)現(xiàn)部分需求，但是深度訂制的畢竟還是不一樣，所以Trident/Gecko雙核瀏覽器就誕生了，Sleipnir、Avant 12（Orca）是這類里面比較常見的。Avant 12因?yàn)橛蠴rca的前期積累，所以輕車熟路，后面還打算加入Chromium，變成三核瀏覽器，但是偏偏現(xiàn)在Mozilla Firefox和Chrome都在瘋狂刷版本號(hào)，肯定有一部分精力要花在跟進(jìn)版本上。
3、Trident/WebKit雙核瀏覽器
現(xiàn)在國(guó)內(nèi)最主流的“雙核”瀏覽器基本都是這個(gè)架構(gòu)，360極速瀏覽器、世界之窗瀏覽器極速版、傲游3搜狗瀏覽器3、QQ瀏覽器、楓樹瀏覽器、快快瀏覽器、百度瀏覽器、阿云瀏覽器（后期版本）、太陽花瀏覽器，其中最奇葩的是傲游3。其它雙核瀏覽器都是基于Chromium的，而傲游是基于WebKit的，但是偏偏又用的是V8引擎。
4、Trident/Gecko/WebKit三核瀏覽器
目前能見的應(yīng)該就是日本的Lunascape，Avant增加了WebKit內(nèi)核之后也會(huì)歸類到這里。說實(shí)話，Lunascape真的很難用，真的很奇葩。各個(gè)內(nèi)核相對(duì)獨(dú)立，外殼本身不夠強(qiáng)化，穩(wěn)定性不高，所以還不如用回單核瀏覽器。

五、幾個(gè)小點(diǎn)

1、Chrome/Chromium
很多人都會(huì)說自己用的雙核瀏覽器是Chrome/IE雙核的，或者說是基于Chrome的。其實(shí)這種說法并不正確，因?yàn)镃hrome本身并不開源，其它廠商是不能去定制Chrome的。能被修改、定制的是Chromium，Chrome的開源開發(fā)版本，代碼和Build都提供下載。Chromium/Chrome兩個(gè)單詞都是鉻，分別是拉丁文和英文，除了名字之外，很有很多不同，你可以自己對(duì)比一下。
Chromium一天最多可以更新十幾二十個(gè)版本，實(shí)驗(yàn)性的新特性都會(huì)現(xiàn)在這里放出，但是Chromium本身其實(shí)并不穩(wěn)定。
Chrome總共有四個(gè)更新分支：Canary、Dev、Beta、Stable，穩(wěn)定性依次增強(qiáng)。
2、MyIE、MyIE2、傲游、GreenBrowser
自行搜索，一段歷史。
3、頁面兼容性判斷
在確保IE瀏覽器沒有損壞的基礎(chǔ)上，搭配一款非Trident內(nèi)核的瀏覽器進(jìn)行判斷，如果可以的話，最好所有內(nèi)核都配齊了。
控制變量就能找到問題所在，是瀏覽器本身的問題，還是頁面編碼有問題。對(duì)于用戶來說就能更好地去選擇自己該用什么瀏覽器訪問什么頁面，對(duì)于開發(fā)者來說應(yīng)該要寫出無差別代碼。
4、一直被模仿，一直被超越的Opera
Opera其實(shí)很好看也很好用，而且極度創(chuàng)新，但是市場(chǎng)占有率一直很低。很多很好用的新特性總是被抄襲，所以大家笑稱Opera“一直被模仿，一直被超越”。坊間傳聞多標(biāo)簽頁瀏覽器就是Opera發(fā)明的，但是貌似有人考究了這個(gè)傳聞其實(shí)不屬實(shí)。不過快速撥號(hào)、Turbo瀏覽等功能就是扎扎實(shí)實(shí)Opera首創(chuàng)的。你可以不用Opera，但是你會(huì)損失很多樂趣。
5、這年頭流行刷版本號(hào)
現(xiàn)在版本號(hào)最高的瀏覽器是Chrome，穩(wěn)定版的版本號(hào)是14，也是現(xiàn)在主流瀏覽器里面誕生時(shí)間最短的，真是一個(gè)刷版本號(hào)高手。早期的Chrome版本更迭還會(huì)增加一些比較重要的新特性，比如擴(kuò)展支持，現(xiàn)在的版本更迭基本上并沒有伴隨什么大的更新。現(xiàn)在很多偽高端用戶就會(huì)整天追著第三方編譯版本趕緊跟進(jìn)版本號(hào)，但是其實(shí)真正的意義并不大。
多虧了Chrome的“提攜”，今年Firefox也在猛刷版本號(hào)，年初還是3.x，現(xiàn)在正式版已經(jīng)是7.0.1，每夜版已經(jīng)到了10.0。Opera積累了多年才到11.50，測(cè)試版是12.0。IE的正式版是9，平臺(tái)預(yù)覽版是10。
6、查看源代碼、開發(fā)者工具
一般來說，查看源代碼和使用開發(fā)者工具是比較實(shí)用的，可能用的機(jī)會(huì)并不多，但是在判斷一些問題的時(shí)候其實(shí)是很有用的。通過查看源代碼或者使用開發(fā)者工具，可以大致了解這些網(wǎng)站里面的一些元素或者加載的腳本或者是規(guī)則，對(duì)于判斷兼容性問題有一定的幫助，也可以用來準(zhǔn)確捕捉頁面元素。
7、幾個(gè)主要的瀏覽器官網(wǎng)以及版本下載
（1）Internet Explorer
官網(wǎng)：
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
官網(wǎng)：
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
官網(wǎng)：
http://www.apple.com.cn/safari/
下載：
http://www.apple.com.cn/safari/download/
（4）Chromium
官網(wǎng)：
http://www.chromium.org/
下載：
http://build.chromium.org/f/chromium/snapshots/Win_Webkit_Latest/
（5）Google Chrome
官網(wǎng)：
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
官網(wǎng)：
http://www.opera.com/
正式版：
http://www.opera.com/download/
測(cè)試版：
http://snapshot.opera.com/windows/latest

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

二、瀏覽器渲染原理

Web頁面運(yùn)行在各種各樣的瀏覽器當(dāng)中，瀏覽器載入、渲染頁面的速度直接影響著用戶體驗(yàn)簡(jiǎn)單地說，頁面渲染就是瀏覽器將html代碼根據(jù)CSS定義的規(guī)則顯示在瀏覽器窗口中的這個(gè)過程。
先來大致了解一下瀏覽器都是怎么干活的： 　

1. 用戶輸入網(wǎng)址（假設(shè)是個(gè)html頁面，并且是第一次訪問），瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回html文件；
2. 瀏覽器開始載入html代碼，發(fā)現(xiàn)<head>標(biāo)簽內(nèi)有一個(gè)<link>標(biāo)簽引用外部CSS文件；
3. 瀏覽器又發(fā)出CSS文件的請(qǐng)求，服務(wù)器返回這個(gè)CSS文件；
4. 瀏覽器繼續(xù)載入html中<body>部分的代碼，并且CSS文件已經(jīng)拿到手了，可以開始渲染頁面了；
5. 瀏覽器在代碼中發(fā)現(xiàn)一個(gè)<img>標(biāo)簽引用了一張圖片，向服務(wù)器發(fā)出請(qǐng)求。此時(shí)瀏覽器不會(huì)等到圖片下載完，而是繼續(xù)渲染后面的代碼；
6. 服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼；
7. 瀏覽器發(fā)現(xiàn)了一個(gè)包含一行Javascript代碼的<script>標(biāo)簽，趕快運(yùn)行它；
8. Javascript腳本執(zhí)行了這條語句，它命令瀏覽器隱藏掉代碼中的某個(gè)（style.display=”none”）。杯具啊，突然就少了這么一個(gè)元素，瀏覽器不得不重新渲染這部分代碼；
9. 終于等到了</html>的到來，瀏覽器淚流滿面……
10. 等等，還沒完，用戶點(diǎn)了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下<link>標(biāo)簽的CSS路徑；
11. 瀏覽器召集了在座的各位<span><ul><li>們，“大伙兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務(wù)器請(qǐng)求了新的CSS文件，重新渲染頁面。

瀏覽器每天就這么來來回回跑著，要知道不同的人寫出來的html和css代碼質(zhì)量參差不齊，說不定哪天跑著跑著就掛掉了。
好在這個(gè)世界還有這么一群人——頁面重構(gòu)工程師，平時(shí)挺不起眼，也就幫視覺設(shè)計(jì)師們切切圖啊改改字，其實(shí)背地里還是干了不少實(shí)事的。
說到頁面為什么會(huì)慢？那是因?yàn)闉g覽器要花時(shí)間、花精力去渲染，尤其是當(dāng)它發(fā)現(xiàn)某個(gè)部分發(fā)生了點(diǎn)變化影響了布局，需要倒回去重新渲染，內(nèi)行稱這個(gè)回退的過程叫reflow。

不同內(nèi)核瀏覽器的差異以及瀏覽器渲染簡(jiǎn)介

reflow幾乎是無法避免的。現(xiàn)在界面上流行的一些效果，比如樹狀目錄的折疊、展開（實(shí)質(zhì)上是元素的顯示與隱藏）等，都將引起瀏覽器的 reflow。
鼠標(biāo)滑過、點(diǎn)擊……只要這些行為引起了頁面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會(huì)引起它內(nèi)部、周圍甚至整個(gè)頁面的重新渲染。
通常我們都無法預(yù)估瀏覽器到底會(huì)reflow哪一部分的代碼，它們都彼此相互影響著。

不同內(nèi)核瀏覽器的差異以及瀏覽器渲染簡(jiǎn)介

三、從瀏覽器的渲染原理講CSS性能

平時(shí)我們幾乎每天都在和瀏覽器打交道，寫出來的頁面很有可能在不同的瀏覽器下顯示的不一樣。苦逼的前端攻城師們?yōu)榱思嫒莞鱾€(gè)瀏覽器而不斷地去測(cè)試和調(diào)試，還在腦子中記下各種遇到的BUG及解決方案，而我們好像并沒有去主動(dòng)地關(guān)注和了解下瀏覽器的工作原理。
如果我們對(duì)此做一點(diǎn)了解，我想在項(xiàng)目過程中就可以根據(jù)它有效的避免一些問題以及對(duì)頁面性能做出相應(yīng)的改進(jìn)。
今天我們主要根據(jù)瀏覽器的渲染原理對(duì)CSS的書寫性能做一點(diǎn)改進(jìn)（當(dāng)然還有JS本篇文章暫不考慮，后面的文章會(huì)做介紹），下面讓我們一起來揭開瀏覽器的渲染原理這一神秘的面紗吧：
最終決定瀏覽器表現(xiàn)出來的頁面效果的差異是：渲染引擎 Rendering Engine（也叫做排版引擎），也就是我們通常所說的“瀏覽器內(nèi)核”，負(fù)責(zé)解析網(wǎng)頁語法（如HTML、JavaScript）并渲染、展示網(wǎng)頁。相同的代碼在不同的瀏覽器呈現(xiàn)出來的效果不一樣，那么就很有可能是不同的瀏覽器內(nèi)核導(dǎo)致的。
我們來看一下加載頁面時(shí)瀏覽器的具體工作流程（圖一）：


（圖一）
1、解析HTML以重建DOM樹（Parsing HTML to construct the DOM tree ）：渲染引擎開始解析HTML文檔，轉(zhuǎn)換樹中的標(biāo)簽到DOM節(jié)點(diǎn)，它被稱為“內(nèi)容樹”。
2、構(gòu)建渲染樹（Render tree construction）：解析CSS（包括外部CSS文件和樣式元素），根據(jù)CSS選擇器計(jì)算出節(jié)點(diǎn)的樣式，創(chuàng)建另一個(gè)樹 —- 渲染樹。
3、布局渲染樹（Layout of the render tree）: 從根節(jié)點(diǎn)遞歸調(diào)用，計(jì)算每一個(gè)元素的大小、位置等，給每個(gè)節(jié)點(diǎn)所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)。
4、繪制渲染樹（Painting the render tree） : 遍歷渲染樹，每個(gè)節(jié)點(diǎn)將使用UI后端層來繪制。
主要的流程就是：構(gòu)建一個(gè)dom樹，頁面要顯示的各元素都會(huì)創(chuàng)建到這個(gè)dom樹當(dāng)中，每當(dāng)一個(gè)新元素加入到這個(gè)dom樹當(dāng)中，瀏覽器便會(huì)通過css引擎查遍css樣式表，找到符合該元素的樣式規(guī)則應(yīng)用到這個(gè)元素上。
注意了：css引擎查找樣式表，對(duì)每條規(guī)則都按從右到左的順序去匹配。
看如下規(guī)則：
1

nav li {}

看起來很快，實(shí)際上很慢，盡管這讓人有點(diǎn)費(fèi)解#_#。
我們中的大多數(shù)人，尤其是那些從左到右閱讀的人，可能猜想瀏覽器也是執(zhí)行從左到右匹配規(guī)則的，因此會(huì)推測(cè)這條規(guī)則的開銷并不高。
在腦海中，我們想象瀏覽器會(huì)像這樣工作：找到唯一的ID為nav的元素，然后把這個(gè)樣式應(yīng)用到直系子元素的li元素上。
我們知道有一個(gè)ID為nav的元素，并且它只有幾個(gè)Li子元素，所以這個(gè)CSS選擇符應(yīng)該相當(dāng)高效。
事實(shí)上，CSS選擇符是從右到左進(jìn)行匹配的。了解這方面的知識(shí)后，我們知道這個(gè)之前看似高效地規(guī)則實(shí)際開銷相當(dāng)高，瀏覽器必須遍歷頁面上每個(gè)li元素并確定其父元素的id是否為nav。
1

*{}

額，這種方法我剛寫CSS的也寫過，殊不知這種效率是差到極點(diǎn)的做法，因?yàn)?通配符將匹配所有元素，所以瀏覽器必須去遍歷每一個(gè)元素，這樣的計(jì)算次數(shù)可能是上萬次！
1

ul#nav{} ul.nav{}

在頁面中一個(gè)指定的ID只能對(duì)應(yīng)一個(gè)元素，所以沒有必要添加額外的限定符，而且這會(huì)使它更低效。同時(shí)也不要用具體的標(biāo)簽限定類選擇符，而是要根據(jù)實(shí)際的情況對(duì)類名進(jìn)行擴(kuò)展。例如把ul.nav改成.main_nav更好。
1

ul li li li .nav_item{}

對(duì)于這樣的選擇器，之前也寫過，最后自己也數(shù)不過來有多少后代選擇器了，何不用一個(gè)類來關(guān)聯(lián)最后的標(biāo)簽元素，如.extra_navitem，這樣只需要匹配class為extra_navitem的元素，效率明顯提升了
對(duì)此，在CSS書寫過程中，總結(jié)出如下性能提升的方案：
避免使用通配規(guī)則 如 *{} 計(jì)算次數(shù)驚人！只對(duì)需要用到的元素進(jìn)行選擇
盡量少的去對(duì)標(biāo)簽進(jìn)行選擇，而是用class 如：#nav li{},可以為li加上nav_item的類名，如下選擇.nav_item{}
不要去用標(biāo)簽限定ID或者類選擇符 如：ul#nav,應(yīng)該簡(jiǎn)化為#nav
盡量少的去使用后代選擇器，降低選擇器的權(quán)重值 后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關(guān)聯(lián)每一個(gè)標(biāo)簽元素
考慮繼承 了解哪些屬性是可以通過繼承而來的，然后避免對(duì)這些屬性重復(fù)指定規(guī)則

選用高效的選擇符，可以減少頁面的渲染時(shí)間，從而有效的提升用戶體驗(yàn)（頁面越快，用戶當(dāng)然越喜歡^_）,你可以看一下CSS selectors Test，這個(gè)實(shí)驗(yàn)的重點(diǎn)是評(píng)估復(fù)雜選擇符和簡(jiǎn)單選擇符的開銷。
也許當(dāng)你想讓渲染速度最高效時(shí)，你可能會(huì)給每個(gè)獨(dú)立的標(biāo)簽配置一個(gè)ID，然后用這些ID寫樣式。那的確會(huì)超級(jí)快，也超級(jí)荒唐！這樣的結(jié)果是語義極差，后期的維護(hù)難到了極點(diǎn)。
但說到底，CSS性能這東西對(duì)于小的項(xiàng)目來講可能真的是微乎其微的東西，提升可能也不是很明顯，但對(duì)于大型的項(xiàng)目肯定是有幫助的。而且一個(gè)好的CSS書寫習(xí)慣和方式能夠幫助我們更加嚴(yán)謹(jǐn)?shù)囊笞约骸?/p>