久操av在线,91精品国产91久久久久久最新,91成人福利视频

主頁 > 知識(shí)庫 > 了解CSS的查找匹配原理，讓CSS更簡潔、高效

了解CSS的查找匹配原理，讓CSS更簡潔、高效

看1個(gè)簡單的CSS：

DIV#divBox p span.red{color:red;}，按習(xí)慣我們對這個(gè)CSS 的理解是，瀏覽器先查找id為divBox的DIV元素，當(dāng)找到后，再找其下的所有p元素，然后再查找所有span元素，當(dāng)發(fā)現(xiàn)有span的class為red的時(shí)候，就應(yīng)用該style。多么簡單易懂的原理，可是這個(gè)理解卻是完完全全相反、錯(cuò)誤的。

匹配原理：

瀏覽器CSS匹配不是從左到右進(jìn)行查找，而是從右到左進(jìn)行查找。比如之前說的 DIV#divBox p span.red{color:red;}，瀏覽器的查找順序如下：

　　先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。

瀏覽器從右到左進(jìn)行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。比如如下html和css:

復(fù)制代碼代碼如下:

 
style> 
DIV#divBox p span.red{color:red;} 
style> 
body> 
div id="divBox"> 
p>span>s1/span>/p> 
p>span>s2/span>/p> 
p>span>s3/span>/p> 
p>span class='red'>s4/span>/p> 
/div> 
/body> 

如果按從左到右查找，哪會(huì)先查找到很多不相關(guān)的p和span元素。而如果按從右到左的方式進(jìn)行查找，則首先就查找到span class='red'>的元素。firefox稱這種查找方式為key selector(關(guān)鍵字查詢)，所謂的關(guān)鍵字就是樣式規(guī)則中最后(最右邊)的規(guī)則，上面的key就是span.red。

簡潔、高效的CSS:
所謂高效的CSS就是讓瀏覽器在查找style匹配的元素的時(shí)候盡量進(jìn)行少的查找，下面列出一些我們常見的寫CSS犯一些低效錯(cuò)誤(也是我以前常常犯的錯(cuò)誤，還老以為這樣寫才是高效的)：

1.不要在ID選擇器前使用標(biāo)簽名
一般寫法：DIV#divBox
更好寫法：#divBox
解釋：因?yàn)镮D選擇器是唯一的，加上div反而增加不必要的匹配。

2.不要再class選擇器前使用標(biāo)簽名
一般寫法：span.red
更好寫法：.red
解釋：同第一條，但如果你定義了多個(gè).red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css文件中定義如下：
p.red{color:red;}
span.red{color:#ff00ff}
如果是這樣定義的就不要去掉，去掉后就會(huì)混淆，不過建議最好不要這樣寫
3.盡量少使用層級(jí)關(guān)系
一般寫法：#divBox p .red{color:red;}
更好寫法：.red{..}

4.使用class代替層級(jí)關(guān)系
一般寫法：#divBox ul li a{display:block;}
更好寫法：.block{display:block;}

PS：看有些同學(xué)對從右到左的理論保持懷疑，下面貼出firefox和google的2篇相關(guān)css解釋的文章，供大家參考

mozilla firefox：https://developer.mozilla.org/en/Writing_Efficient_CSS

google page-speed：http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html

您可能感興趣的文章:

WEB高性能開發(fā)之瘋狂的HTML壓縮
web高性能開發(fā)系列隨筆 BearRui(AK-47)版
高性能WEB開發(fā) flush讓頁面分塊,逐步呈現(xiàn) flush讓頁面分塊,逐步呈現(xiàn)
高性能WEB開發(fā) 頁面呈現(xiàn)、重繪、回流。
高性能WEB開發(fā) JS、CSS的合并、壓縮、緩存管理
高性能WEB開發(fā)(5) 減少請求，響應(yīng)的數(shù)據(jù)量
高性能WEB開發(fā) 為什么要減少請求數(shù)，如何減少請求數(shù)!
高性能web開發(fā) 如何加載JS，JS應(yīng)該放在什么位置？
高性能WEB開發(fā) 圖片壓縮篇
高性能WEB開發(fā) web性能測試工具推薦
高性能WEB開發(fā) nginx HTTP服務(wù)器篇
編寫高性能的JavaScript 腳本的加載與執(zhí)行

標(biāo)簽：萊蕪邵陽貴州滄州鶴壁混顯賀州廣安

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《了解CSS的查找匹配原理，讓CSS更簡潔、高效》，本文關(guān)鍵詞了解,CSS,的,查找,匹配,原理,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

了解CSS的查找匹配原理，讓CSS更簡潔、高效

了解CSS的查找匹配原理，讓CSS更簡潔、高效