很(hěn)多(duō)人(rén)用了很(hěn)久的css卻從來(lái)也不知道(dào)css是怎麽去工作(zuò)的，寫出來(lái)的css浏覽器(qì)是怎麽樣去解析的呢？所以往 往在一定階段之後，就變成了進一步提高(gāo)css水(shuǐ)平的一個(gè)瓶頸。我将從以下進行(xíng)分析。早期的網頁浏覽器(qì)隻支援簡易版本的HTML。專屬軟件的浏覽器(qì)的迅速發展導緻非标準的HTML代碼的産生(shēng)。但(dàn)随着HTML的成長，為(wèi)了滿足設計(jì)師(shī)的要求，HTML獲得(de)了很(hěn)多(duō)顯示功能。随着這些(xiē)功能的增加外來(lái)定義樣式的語言越來(lái)越沒有(yǒu)意義了。

一、浏覽器(qì)的發展與CSS

網頁浏覽器(qì)主要通(tōng)過HTTP協議連接網頁服務器(qì)而取得(de)網頁，HTTP容許網頁浏覽器(qì)送交資料到網頁服務器(qì)并且獲取網頁。目前最常用的 HTTP 是 HTTP/1.1，這個(gè)協議在RFC2616中被完整定義。HTTP/1.1 有(yǒu)其一套Internet Explorer并不完全支援的 标準，然而 許多(duō)其他當代的網頁浏覽器(qì)則完全支援這些(xiē)标準。網頁的位置以URL（統一資源定位符）指示，此乃網頁的地址；以http:開(kāi)首的便是 通(tōng)過 HTTP協議登陸。很(hěn)多(duō)浏覽器(qì)同時(shí)支援其他類型的URL及協議，例如ftp:是FTP（檔案傳送協議）、gopher:是Gopher及https: 是 HTTPS（以SSL加密的HTTP）。

早期的網頁浏覽器(qì)隻支援簡易版本的HTML。專屬軟件的浏覽器(qì)的迅速發展導緻非标準的HTML代碼的産生(shēng)。

但(dàn)随着HTML的成長，為(wèi)了滿足設計(jì)師(shī)的要求，HTML獲得(de)了很(hěn)多(duō)顯示功能。随着這些(xiē)功能的增加外來(lái)定義樣式的語言越來(lái)越沒有(yǒu)意義了。

一、浏覽器(qì)的發展與CSS

網頁浏覽器(qì)主要通(tōng)過HTTP協議連接網頁服務器(qì)而取得(de)網頁，HTTP容許網頁浏覽器(qì)送交資料到網頁服務器(qì)并且獲取網頁。目前最常用的 HTTP 是 HTTP/1.1，這個(gè)協議在RFC2616中被完整定義。HTTP/1.1 有(yǒu)其一套Internet Explorer并不完全支援的 标準，然而 許多(duō)其他當代的網頁浏覽器(qì)則完全支援這些(xiē)标準。網頁的位置以URL（統一資源定位符）指示，此乃網頁的地址；以http:開(kāi)首的便是 通(tōng)過 HTTP協議登陸。很(hěn)多(duō)浏覽器(qì)同時(shí)支援其他類型的URL及協議，例如ftp:是FTP（檔案傳送協議）、gopher:是Gopher及https: 是 HTTPS（以SSL加密的HTTP）。

早期的網頁浏覽器(qì)隻支援簡易版本的HTML。專屬軟件的浏覽器(qì)的迅速發展導緻非标準的HTML代碼的産生(shēng)。

但(dàn)随着HTML的成長，為(wèi)了滿足設計(jì)師(shī)的要求，HTML獲得(de)了很(hěn)多(duō)顯示功能。随着這些(xiē)功能的增加外來(lái)定義樣式的語言越來(lái)越沒有(yǒu)意義了。

1994年哈坤·利提出了CSS的最初建議。伯特·波斯（BertBos）當時(shí)正在設計(jì)一個(gè)叫做(zuò)Argo的浏覽器(qì)，他們決定一起合作(zuò)設計(jì)CSS。

當時(shí)已經有(yǒu)過一些(xiē)樣式表語言的建議了，但(dàn)CSS是第一個(gè)含有(yǒu)“層疊”的主意的。在CSS中，一個(gè)文件的樣式可(kě)以從其他的樣式表中繼承下來(lái)。讀者在有(yǒu) 些(xiē) 地方可(kě)以使用他自己更喜歡的樣式，在其他地方則繼承，或“層疊”作(zuò)者的樣式,這種層疊的方式使作(zuò)者和(hé)讀者都可(kě)以靈活地加入自己的設計(jì)，混合各人(rén)的愛(ài)好。

1997年初，W3C內(nèi)組織了專門(mén)管CSS的工作(zuò)組，其負責人(rén)是克裏斯·裏雷。這個(gè)工作(zuò)組開(kāi)始討(tǎo)論第一版中沒有(yǒu)涉及到的問題，其結果是1998年5月出版的第二版要求。到2007年為(wèi)止，第三版還(hái)未完備。

二、浏覽器(qì)是如何渲染頁面和(hé)加載頁面

為(wèi)什麽有(yǒu)些(xiē)網站(zhàn)打開(kāi)的時(shí)候會(huì)加載會(huì)很(hěn)慢，而且是整個(gè)頁面同時(shí)顯示的，而有(yǒu)些(xiē)網站(zhàn)是從頂到下逐步顯示出來(lái)的？要搞懂這個(gè)可(kě)以先從下面這個(gè)常規流程開(kāi)始：

1. 浏覽器(qì)下載的順序是從上(shàng)到下，渲染的順序也是從上(shàng)到下，下載和(hé)渲染是同時(shí)進行(xíng)的。

2. 在渲染到頁面的某一部分時(shí)，其上(shàng)面的所有(yǒu)部分都已經下載完成（并不是說所有(yǒu)相關聯的元素都已經下載完）。

3. 如果遇到語義解釋性的标簽嵌入文件（JS腳本，CSS樣式），那(nà)麽此時(shí)IE的下載過程會(huì)啓用單獨連接進行(xíng)下載。

4. 并且在下載後進行(xíng)解析，解析過程中，停止頁面所有(yǒu)往下元素的下載。

5. 樣式表在下載完成後，将和(hé)以前下載的所有(yǒu)樣式表一起進行(xíng)解析，解析完成後，将對此前所有(yǒu)元素（含以前已經渲染的）重新進行(xíng)渲染。

6. JS、CSS中如有(yǒu)重定義，後定義函數(shù)将覆蓋前定義函數(shù)。

這裏關鍵的是第2-5這三點。渲染效率與下面三點有(yǒu)關：

1. css選擇器(qì)的查詢定位效率

2. 浏覽器(qì)的渲染模式和(hé)算(suàn)法

3. 要進行(xíng)渲染內(nèi)容的大(dà)小(xiǎo)

三、什麽是CSS以及CSS的優點

什麽是CascadingStyleSheets（層疊樣式表）*CSS是CascadingStyleSheets(層疊樣式表)的簡 稱.*CSS 語言是一種标記語言,它不需要編譯,可(kě)以直接由浏覽器(qì)解釋執行(xíng)(屬于浏覽器(qì)解釋型語言).*在标準網頁設計(jì)中CSS負責網頁內(nèi)容 (XHTML)的表 現.*CSS文件也可(kě)以說是一個(gè)文本文件,它包含了一些(xiē)CSS标記,CSS文件必須使用css為(wèi)文件名後綴.*可(kě)以通(tōng)過簡單的更改 CSS文件,改變網頁 的整體(tǐ)表現形式,可(kě)以減少(shǎo)我們的工作(zuò)量,所以她是每一個(gè)網頁設計(jì)人(rén)員的必修課.*CSS是由W3C的CSS工作(zuò)組産生(shēng)和(hé)維護的.

采用CSS+DIV進行(xíng)網頁重構相對與傳統的TABLE網頁布局而具有(yǒu)以下3個(gè)顯著優勢：

1. 表現和(hé)內(nèi)容相分離将設計(jì)部分剝離出來(lái)放在一個(gè)獨立樣式文件中，HTML文件中隻存放文本信息。這樣的頁面對搜索引擎更加友(yǒu)好。

2. 提高(gāo)頁面浏覽速度對于同一個(gè)頁面視(shì)覺效果，采用CSS+DIV重構的頁面容量要比TABLE編碼的頁面文件容量小(xiǎo)得(de)多(duō)，前者一般隻有(yǒu)後者的1/2大(dà)小(xiǎo)。浏覽器(qì)就不用去編譯大(dà)量冗長的标簽。

3. 易于維護和(hé)改版你(nǐ)隻要簡單的修改幾個(gè)CSS文件就可(kě)以重新設計(jì)整個(gè)網站(zhàn)的頁面。

四、浏覽器(qì)對CSS的匹配原理(lǐ)

浏覽器(qì)CSS匹配不是從左到右進行(xíng)查找，而是從右到左進行(xíng)查找。比如之前說的DIV#divBoxpspan.red{color:red;}，浏覽器(qì) 的查找順序如下：先查找html中所有(yǒu)class=’red’的span元素，找到後，再查找其父輩元素中是否有(yǒu)p元素，再判斷p的父元素中是否有(yǒu)id為(wèi) divBox的div元素，如果都存在則CSS匹配上(shàng)。

浏覽器(qì)從右到左進行(xíng)查找的好處是為(wèi)了盡早過濾掉一些(xiē)無關的樣式規則和(hé)元素。firefox稱這種查 找方式為(wèi)keyselector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最後(最右邊)的規則，上(shàng)面的key就是span.red。

五、優化你(nǐ)的CSS

所謂高(gāo)效的CSS就是讓浏覽器(qì)在查找style匹配的元素的時(shí)候盡量進行(xíng)少(shǎo)的查找，下面列出一些(xiē)我們常見的寫CSS犯一些(xiē)低(dī)效錯誤：

1、不要在ID選擇器(qì)前使用标簽名

DIV#divBox /*一般寫法*/
#divBox /*更好寫法*/

解釋：因為(wèi)ID選擇器(qì)是唯一的，加上(shàng)div反而增加不必要的CSS匹配。

2、不要在class選擇器(qì)前使用标簽名

span.red /*一般寫法*/
.red /*更好寫法*

解釋：同第一條，但(dàn)如果你(nǐ)定義了多(duō)個(gè).red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你(nǐ)css文件中定義如下：

p.red{color:red;}
span.red{color:#ff00ff}

如果是這樣定義的就不要去掉，去掉後就會(huì)混淆，不過建議最好不要這樣寫

3、盡量少(shǎo)使用層級關系

#divBoxp.red{color:red;} /*一般寫法*/
.red{..} /*更好寫法*/

4、使用class代替層級關系

#divBoxullia{display:block;} /*一般寫法*/
.block{display:block;} /*更好寫法*/

5、在css渲染效率中id和(hé)class的效率是基本相當的

class最在第一次載入中被緩存，在層疊中會(huì)有(yǒu)更加好的效果，在根部元素采用id會(huì)具有(yǒu)更加好（id有(yǒu)微妙的速度優勢）。