css匹配原理

在優(yōu)化css之前我們需要了解下css是怎么進(jìn)行工作的，我們都知道css是由選擇器，屬性和屬性值構(gòu)成的。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出碌曲免費(fèi)做網(wǎng)站回饋大家。

我們可能會(huì)這樣寫上一行代碼

//css
.con .loulan1 p span{ display: block; }

//html<div class="con">
    <div class="loulan">
        <p><span>文字</span></p>
    </div></div>

在這里我們對(duì)con類里面的loulan類里的p標(biāo)簽里面的span標(biāo)簽進(jìn)行樣式定義。我說(shuō)出來(lái)都嫌累更別說(shuō)寫起來(lái)了，其實(shí)你可以把瀏覽器看作一個(gè)人，它渲染起來(lái)肯定也會(huì)浪費(fèi)性能。

而且css的匹配原理不是從左到右的，而是從右到左的，也就是說(shuō)我們的這行代碼里面，先查找到頁(yè)面里面所有的span元素形成一個(gè)集合，再在所有的span元素往上查找，看看有多span的父元素是p元素或者父元素的父元素是p元素或者......慢慢尋找，把父元素不是p元素的刪去，再往上查找看集合里的有p元素又多少它的父元素的類是loulan...瀏覽器說(shuō)：我好累...

其實(shí)呢瀏覽器從右到左進(jìn)行查找的好處是為了盡早過(guò)濾掉一些無(wú)關(guān)的樣式規(guī)則和元素。并且Firefox 稱這種查找方式為 keyselector(關(guān)鍵字查詢)，所謂的關(guān)鍵字就是樣式規(guī)則中最后(最右邊)的規(guī)則，上面的 key 就是 span。人家本來(lái)是為了能盡快過(guò)濾到一些無(wú)關(guān)樣式規(guī)則的，我們這里缺一層套一層，層層不停歇。所以只是想定義一個(gè)span的樣式在span上加個(gè)類豈不是更好。有人這時(shí)要說(shuō)了，那樣是需要在每個(gè)元素上都加上類嗎？那肯定不是必須的，只不過(guò)我們要了解瀏覽器是怎么查找匹配的，然后結(jié)合現(xiàn)在的結(jié)構(gòu)來(lái)做出一個(gè)最好的最方便的寫法。

//css
.loulanSpan{ display: block; }

//html<div class="con">
    <div class="loulan">
        <p><span class="loulanSpan">文字</span></p>
    </div></div>

css選擇器權(quán)值

這里說(shuō)下CSS的 ID Class Tag選擇器的權(quán)值，也就是他們的優(yōu)先級(jí)，權(quán)值越大，優(yōu)先級(jí)越高

ID:100

Class:10

Tag:1

有了上面兩個(gè)的基礎(chǔ)我們?cè)僭敿?xì)說(shuō)下應(yīng)該怎樣來(lái)優(yōu)化css提高性能

1，減少css嵌套，最好不要套三層以上，一般情況下塊級(jí)元素加上類，里面的內(nèi)聯(lián)元素不用加，css寫的時(shí)候塊級(jí)class套內(nèi)聯(lián)tag，這樣不僅可以減少css文件大小，還能減少性能浪費(fèi)。

2，不要在ID選擇器前面進(jìn)行嵌套，ID本來(lái)就是唯一的而且人家權(quán)值那么大，前方嵌套完全是浪費(fèi)性能。

3，建立公共樣式類，把長(zhǎng)段相同樣式提取出來(lái)作為公共類使用，比如我們常用的清除浮動(dòng)，單行超出顯示省略號(hào)等等等，當(dāng)然如果你使用sass，繼承會(huì)讓你更加方便，同時(shí)我是比較提倡使用sass的，之后肯定也會(huì)寫一篇sass的博客。

4，縮寫css，其中包括縮寫maigin，padding，顏色值等等，要是有兩個(gè)或者兩個(gè)以上的margin-****，寫成margin: * * * *有助于文件大小。

5，減少通配符*或者類似[hidden="true"]這類選擇器的使用，挨個(gè)查找所有...這性能能好嗎？當(dāng)然重置樣式這些必須的東西是不能少的。

6，有些人喜歡在類名前面加上標(biāo)簽名：p.ty_p 來(lái)進(jìn)行更加精確的定位，但是這樣往往效率更差，類名應(yīng)該在全局范圍除非公用是唯一的，所以這種做法是應(yīng)該便面的。

7，巧妙運(yùn)用css的繼承機(jī)制，在css中很多屬性是可以繼承的比如顏色字體等等，父節(jié)點(diǎn)定義了，子節(jié)點(diǎn)就無(wú)需定義。

8，拆分出公共css文件，對(duì)于比較大的項(xiàng)目我們可以將大部分頁(yè)面的公共結(jié)構(gòu)的樣式提取出來(lái)放到單獨(dú)css文件里，這樣一次下載后就放到緩存里，當(dāng)然這種做法會(huì)增加請(qǐng)求，具體做法應(yīng)以實(shí)際情況而定。

9，不用css表達(dá)式，可能大家接觸比較少，但是要記住的是無(wú)論我們?cè)趺挫趴幔搅俗詈蠖际庆o態(tài)的，所以表達(dá)式只是讓你的代碼顯得更加炫酷，但是他對(duì)性能的浪費(fèi)可能是超乎你的想象的，因?yàn)樗⒉恢皇怯?jì)算一次，一些小的事件可能都會(huì)增加它為了有效準(zhǔn)確而進(jìn)行計(jì)算求值的次數(shù)。

10，少用css rest，可能你會(huì)覺得重置樣式是規(guī)范，但是其實(shí)其中有很多的操作是不必要不友好的，有需求有興趣的朋友可以選擇normolize.css

11，cssSprite，合成所有icon圖片，用寬高加上bacgroud-position的背景圖方式顯現(xiàn)出我們要的icon圖，這是一種十分實(shí)用的技巧，極大減少了http請(qǐng)求。

當(dāng)然我們還需要一些善后工作，CSS壓縮(這里提供一個(gè)在線壓縮 YUI Compressor ，當(dāng)然你會(huì)用其他工具來(lái)壓縮是十分好的)，GZIP壓縮，Gzip是一種流行的文件壓縮算法，詳細(xì)做法可以谷歌或者百度。

當(dāng)然css性能優(yōu)化技術(shù)可能不僅僅是這些

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：CSS性能分析，如何優(yōu)化CSS提高性能-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://jinyejixie.com/article32/diegsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、外貿(mào)建站、標(biāo)簽優(yōu)化、微信公眾號(hào)、自適應(yīng)網(wǎng)站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)