前言

轉自博客園

原文

一、簡單介紹一下什么是瀏覽器內核。
瀏覽器最重要或者說核心的部分是“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修改過來的內核。

---------------** 另一個關于瀏覽器內核的說明** -----------------
可以直接去 維基百科 看看

一、排版引擎
首先厘清一下瀏覽器內核是什么東西。
英文叫做：Rendering Engine，中文翻譯很多，排版引擎、解釋引擎、渲染引擎，現在流行稱為瀏覽器內核，至于為什么流行這么稱呼，請自行領悟。
Rendering Engine，顧名思義，就是用來渲染網頁內容的，將網頁的內容和排版代碼轉換為可視的頁面。因為是排版，所以肯定會排版錯位等問題。為什么會排版錯位呢？有的是由于網站本身編寫不規范，有的是由于瀏覽器本身的渲染不標準。
現在有幾個主流的排版引擎，因為這些排版引擎都有其代表的瀏覽器，所以常常會把排版引擎的名稱和瀏覽器的名稱混用，比如常的說IE內核、Chrome內核。其實這樣子是不太合理的，因為一個完整的瀏覽器不會只有一的排版引擎，還有自己的界面框架和其它的功能支撐，而排版引擎本身也不可能實現瀏覽器的所有功能。下面羅列一下幾款主流的排版引擎和瀏覽器。
1、Trident（Windows）
IE瀏覽器所使用的內核，也是很多瀏覽器所使用的內核，通常被稱為IE內核。基于Trident內核的瀏覽器非常多，這是因為Trident內核提供了豐富的調用接口。老的Trident內核（比如常說的IE6內核）一直是不遵循W3C標準的，但是由于它的市場份額最大，所以后果就是大量的網站只支持老的Trident內核，依據W3C標準寫的網頁在老的Trident內核下面又出現偏差。目前可供調用的最新版的Trident內核是IE9所用的內核，相較之前的版本對W3C標準的支持增強了很多。
Trident內核的瀏覽器：
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瀏覽器、螞蟻瀏覽器、飛騰瀏覽器、速達瀏覽器、佐羅瀏覽器；
2、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
3、KHTML（Linux）
KDE開發的內核，速度快捷，容錯度低。這個內核可能不見得很多人知道，但是后面再看下去你就明白了。
** 常見的KHTML內核的瀏覽器：**Konqueror
4、WebKit（跨平臺）
由KHTML發展而來，也是蘋果給開源世界的一大貢獻。是目前最火熱的瀏覽器內核，火熱倒不是說市場份額，而是應用的面積和勢頭。因為是脫胎于KHTML，所以也是具有高速的特點，同樣遵循W3C標準。
常見的WebKit內核的瀏覽器：Apple Safari、Symbian系統瀏覽器
5、Chromium（跨平臺）
維基百科里面并沒有將Chromium從WebKit分出來，這個區分完全是基于我個人的惡趣味。記得以前看過一個大牛的博文說過，Chromium把WebKit的代碼梳理得可讀性提高很多，所以以前可能需要一天進行編譯的代碼，現在只要兩個小時就能搞定。這個我自己也沒有考究過，但是估計可信。這個也能解釋為什么Gecko和WebKit出來了這么久，第三方編譯、定制的版本并不多，但是由Chromium衍生出來的瀏覽器早就滿坑滿谷了。
常見的Chromium內核的瀏覽器：Chromium、Google Chrome、SRWare Iron、Comodo Dragon
6、Presto（跨平臺）
Opera的內核，準確地說，是Opera 7.0及以后版本的內核，Opera 3.5-6.1版本使用的內核叫做Elektra。不用說，Presto對W3C標準的支持也是很良好的。雖然我很喜歡Opera，但是我對Presto的渲染速度一直有保留態度。之前在OperaChina論壇看見有人說過，Presto優先解析文字，保證可閱讀性，媒體資源的渲染放后。
常見的Presto內核的瀏覽器：Opera
7、其它
http://zh.wikipedia.org/wiki/排版引擎

二、JavaScript引擎

說完了排版引擎，接下來說說JavaScript引擎。顧名思義，JavaScript引擎就是用來渲染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引擎
http://v8.googlecode.com/svn/data/benchmarks/v6/run.html
現在很多“雙核”瀏覽器都用它來跑分測試JavaScript引擎，分數越高越好。
2、Acid3
http://acid3.acidtests.org/
標準支持測試，分數越高越好，滿分是100分。
3、HTML5
http://www.html5test.com/
測試瀏覽器對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搜狗瀏覽器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、MyIE、MyIE2、傲游、GreenBrowser
自行搜索，一段歷史。
3、頁面兼容性判斷
在確保IE瀏覽器沒有損壞的基礎上，搭配一款非Trident內核的瀏覽器進行判斷，如果可以的話，最好所有內核都配齊了。
控制變量就能找到問題所在，是瀏覽器本身的問題，還是頁面編碼有問題。對于用戶來說就能更好地去選擇自己該用什么瀏覽器訪問什么頁面，對于開發者來說應該要寫出無差別代碼。
4、一直被模仿，一直被超越的Opera
Opera其實很好看也很好用，而且極度創新，但是市場占有率一直很低。很多很好用的新特性總是被抄襲，所以大家笑稱Opera“一直被模仿，一直被超越”。坊間傳聞多標簽頁瀏覽器就是Opera發明的，但是貌似有人考究了這個傳聞其實不屬實。不過快速撥號、Turbo瀏覽等功能就是扎扎實實Opera首創的。你可以不用Opera，但是你會損失很多樂趣。
5、這年頭流行刷版本號
現在版本號最高的瀏覽器是Chrome，穩定版的版本號是14，也是現在主流瀏覽器里面誕生時間最短的，真是一個刷版本號高手。早期的Chrome版本更迭還會增加一些比較重要的新特性，比如擴展支持，現在的版本更迭基本上并沒有伴隨什么大的更新。現在很多偽高端用戶就會整天追著第三方編譯版本趕緊跟進版本號，但是其實真正的意義并不大。
多虧了Chrome的“提攜”，今年Firefox也在猛刷版本號，年初還是3.x，現在正式版已經是7.0.1，每夜版已經到了10.0。Opera積累了多年才到11.50，測試版是12.0。IE的正式版是9，平臺預覽版是10。
6、查看源代碼、開發者工具
一般來說，查看源代碼和使用開發者工具是比較實用的，可能用的機會并不多，但是在判斷一些問題的時候其實是很有用的。通過查看源代碼或者使用開發者工具，可以大致了解這些網站里面的一些元素或者加載的腳本或者是規則，對于判斷兼容性問題有一定的幫助，也可以用來準確捕捉頁面元素。
7、幾個主要的瀏覽器官網以及版本下載
（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

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

二、瀏覽器渲染原理

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哪一部分的代碼，它們都彼此相互影響著。

不同內核瀏覽器的差異以及瀏覽器渲染簡介

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

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


（圖一）
1、解析HTML以重建DOM樹（Parsing HTML to construct the DOM tree ）：渲染引擎開始解析HTML文檔，轉換樹中的標簽到DOM節點，它被稱為“內容樹”。
2、構建渲染樹（Render tree construction）：解析CSS（包括外部CSS文件和樣式元素），根據CSS選擇器計算出節點的樣式，創建另一個樹 —- 渲染樹。
3、布局渲染樹（Layout of the render tree）: 從根節點遞歸調用，計算每一個元素的大小、位置等，給每個節點所應該出現在屏幕上的精確坐標。
4、繪制渲染樹（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書寫過程中，總結出如下性能提升的方案：
避免使用通配規則 如 *{} 計算次數驚人！只對需要用到的元素進行選擇
盡量少的去對標簽進行選擇，而是用class 如：#nav li{},可以為li加上nav_item的類名，如下選擇.nav_item{}
不要去用標簽限定ID或者類選擇符 如：ul#nav,應該簡化為#nav
盡量少的去使用后代選擇器，降低選擇器的權重值 后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關聯每一個標簽元素
考慮繼承 了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復指定規則

選用高效的選擇符，可以減少頁面的渲染時間，從而有效的提升用戶體驗（頁面越快，用戶當然越喜歡^_）,你可以看一下CSS selectors Test，這個實驗的重點是評估復雜選擇符和簡單選擇符的開銷。
也許當你想讓渲染速度最高效時，你可能會給每個獨立的標簽配置一個ID，然后用這些ID寫樣式。那的確會超級快，也超級荒唐！這樣的結果是語義極差，后期的維護難到了極點。
但說到底，CSS性能這東西對于小的項目來講可能真的是微乎其微的東西，提升可能也不是很明顯，但對于大型的項目肯定是有幫助的。而且一個好的CSS書寫習慣和方式能夠幫助我們更加嚴謹的要求自己。