來源：梧桐雨
從事Web前端開發的人都與CSS打交道很多，有的人也許不知道css是怎麼去工作的，寫出來的css瀏覽器是怎麼樣去解析的呢？當這個成為我們提高css水平的一個瓶頸時，是否應該多瞭解一下呢？
一、瀏覽器的發展與CSS
網頁瀏覽器主要通過HTTP協議連線網頁伺服器而取得網頁，HTTP容許網頁瀏覽器送交資料到網頁伺服器並且獲取網頁。目前最常用的 HTTP 是 HTTP/1.1，這個協議在RFC2616中被完整定義。HTTP/1.1 有其一套Internet Explorer並不完全支援的 標準，然而 許多其他當代的網頁瀏覽器則完全支援這些標準。網頁的位置以URL（統一資源定位符）指示，此乃網頁的地址；以http:開首的便是 通過 HTTP協議登陸。很多瀏覽器同時支援其他型別的URL及協議，例如ftp:是FTP（檔案傳送協議）、gopher:是Gopher及https: 是 HTTPS（以SSL加密的HTTP）。
早期的網頁瀏覽器只支援簡易版本的HTML。專屬軟體的瀏覽器的迅速發展導致非標準的HTML程式碼的產生。但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加外來定義樣式的語言越來越沒有意義了。
1994年哈坤·利提出了CSS的最初建議。伯特·波斯（BertBos）當時正在設計一個叫做Argo的瀏覽器，他們決定一起合作設計CSS。
當時已經有過一些樣式表語言的建議了，但CSS是第一個含有“層疊”的主意的。在CSS中，一個檔案的樣式可以從其他的樣式表中繼承下來。讀者在有 些 地方可以使用他自己更喜歡的樣式，在其他地方則繼承，或“層疊”作者的樣式,這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合各人的愛好。
1997年初，W3C內組織了專門管CSS的工作組，其負責人是克里斯·裡雷。這個工作組開始討論第一版中沒有涉及到的問題，其結 果是1998年5月出版的第二版要求。到2007年為止，第三版還未完備。
二、瀏覽器是如何渲染頁面和載入頁面
為什麼有些網站開啟的時候會載入會很慢，而且是整個頁面同時顯示的，而有些網站是從頂到下逐步顯示出來的？要搞懂這個可以先從下面這個常規流程開始：
1. 瀏覽器下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。
2. 在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（並不是說所有相關聯的元素都已經下載完）。
3. 如果遇到語義解釋性的標籤嵌入檔案（JS指令碼，CSS樣式），那麼此時IE的下載過程會啟用單獨連線進行下載。
4. 並且在下載後進行解析，解析過程中，停止頁面所有往下元素的下載。
5. 樣式表在下載完成後，將和以前下載的所有樣式表一起進行解析，解析完成後，將對此前所有元素（含以前已經渲染的）重新進行渲染。
6. JS、CSS中如有重定義，後定義函式將覆蓋前定義函式。
這裡關鍵的是第2-5這三點。渲染效率與下面三點有關：
1. css選擇器的查詢定位效率
2. 瀏覽器的渲染模式和演算法
3. 要進行渲染內容的大小
三、什麼是CSS以及CSS的優點
什麼是CascadingStyleSheets（層疊樣式表）*CSS是CascadingStyleSheets(層疊樣式表)的簡 稱.*CSS 語言是一種標記語言,它不需要編譯,可以直接由瀏覽器解釋執行(屬於瀏覽器解釋型語言).*在標準網頁設計中CSS負責網頁內容 (XHTML)的表 現.*CSS檔案也可以說是一個文字檔案,它包含了一些CSS標記,CSS檔案必須使用css為檔名字尾.*可以通過簡單的更改 CSS檔案,改變網頁 的整體表現形式,可以減少我們的工作量,所以她是每一個網頁設計人員的必修課.*CSS是由W3C的CSS工作組產生和維護的。
採用CSS+DIV進行網頁重構相對與傳統的TABLE網頁佈局而具有以下3個顯著優勢：
1. 表現和內容相分離將設計部分剝離出來放在一個獨立樣式檔案中，HTML檔案中只存放文字資訊。這樣的頁面對搜尋引擎更加友好。
2. 提高頁面瀏覽速度對於同一個頁面視覺效果，採用CSS+DIV重構的頁面容量要比TABLE編碼的頁面檔案容量小得多，前者一般只有後者的1/2大小。瀏覽器就不用去編譯大量冗長的標籤。
3. 易於維護和改版你只要簡單的修改幾個CSS檔案就可以重新設計整個網站的頁面。
四、瀏覽器對CSS的匹配原理
瀏覽器CSS匹配不是從左到右進行查詢，而是從右到左進行查詢。比如之前說的DIV#divBoxpspan.red{color:red;}，瀏覽器 的查詢順序如下：先查詢html中所有class=’red’的span元素，找到後，再查詢其父輩元素中是否有p元素，再判斷p的父元素中是否有id為 divBox的div元素，如果都存在則CSS匹配上。
瀏覽器從右到左進行查詢的好處是為了儘早過濾掉一些無關的樣式規則和元素。firefox稱這種查 找方式為keyselector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最後(最右邊)的規則，上面的key就是span.red。
五、優化你的CSS
所謂高效的CSS就是讓瀏覽器在查詢style匹配的元素的時候儘量進行少的查詢，下面列出一些我們常見的寫CSS犯一些低效錯誤：
1、不要在ID選擇器前使用標籤名
一般寫法：DIV#divBox
更好寫法：#divBox
解釋：因為ID選擇器是唯一的，加上div反而增加不必要的CSS匹配。
2、不要在class選擇器前使用標籤名
一般寫法：span.red
更好寫法：.red
解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css檔案中定義如下： p.red{color:red;}
span.red{color:#ff00ff}複製程式碼
如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫
3、儘量少使用層級關係
一般寫法：#divBoxp.red{color:red;}
更好寫法：.red{..}
4、使用class代替層級關係
一般寫法：#divBoxullia{display:block;}
更好寫法：.block{display:block;}
5、在css渲染效率中id和class的效率是基本相當的
class最在第一次載入中被快取，在層疊中會有更加好的效果，在根部元素採用id會具有更加好（id有微妙的速度優勢）。