現(xiàn)在據(jù)我知道比較好的用來測(cè)試網(wǎng)頁性能的工具有兩個(gè)，分別為：老牌的雅虎yslow,新秀google page Speed。

怎么會(huì)突然想起談css與性能優(yōu)化呢？其實(shí)這個(gè)問題我已經(jīng)想了很久了，想寫，但是也不知道從何寫起，今天就簡(jiǎn)單的說一下，近段使用通過使用page Speed，對(duì)css性能優(yōu)化的一點(diǎn)看法吧！

在市場(chǎng)上的很多書，講的css的寫法都大同小異，并沒有說，如何寫好，如何寫不好！只是說到了id和class是作為css和js的掛鉤，我們可以通過id與class來控制頁面的展現(xiàn)效果。并且還談到了css層級(jí)寫法的強(qiáng)大威力，所以大多數(shù)為了減少在頁面中定義id與class，都大量的使用了css層級(jí)的寫法，比如：

<div class=”list”>

<ul>

<li><span>01</span>測(cè)試列表</li>

<li><span>01</span>測(cè)試列表</li>

</ul>

</div>

這樣的一個(gè)結(jié)構(gòu)，如果我們想修改li中的span的話，為了盡量的減少class的定義，我們可以這樣寫：

.list ul li span{樣式}

.list li span{樣式}

list span{樣式}

這三種寫法有什么好處與不好的地方呢？

如果使用第一種方法，我個(gè)人覺得太長(zhǎng)了，沒有必要，那如果使用第三種寫法呢？怕的是如果在這個(gè)div與ul平級(jí)也有span的時(shí)候，這時(shí)候這個(gè)span也會(huì)被繼承到樣式，我個(gè)人平時(shí)都比較喜歡第一種寫法，相對(duì)來說，對(duì)span比較安全，而且可以節(jié)約幾個(gè)字符吧！嘿嘿！但是我的這種寫法通過page Speed的檢測(cè)結(jié)果是屬于低效的！因?yàn)樾枰獧z測(cè)的層級(jí)太多！就像我們上樓梯和下樓梯一樣！故而像這種地方，我們完全可以在html中為span增加class,更有可能這個(gè)class我們以后還用得著！

<div>

<ul>

<li><span class=”num”>01</span>測(cè)試列表</li>

<li><span class=”num”>01</span>測(cè)試列表</li>

</ul>

</div>

結(jié)構(gòu)被我改成了這樣，如果需要對(duì)這個(gè)span進(jìn)行修飾的話，自然你也知道應(yīng)該如何寫啦：

.num{樣式}

這樣的話，瀏覽可以直接找到num這個(gè)樣式，直接賦予他樣式，這樣是不是更簡(jiǎn)潔，更高效呢？如果你不信，可以試試吧！

當(dāng)然，class的定義與層級(jí)的使用的話，還有很多，很多，我在這里就僅僅是舉了一個(gè)簡(jiǎn)單的例子。如果你與我有不同看法的，請(qǐng)指正。

節(jié)約樣式

我們?cè)趯懸粋€(gè)網(wǎng)站的時(shí)候，特別是在站不大不小的時(shí)候，都會(huì)把樣式寫在一個(gè)樣式表中，但是這樣的話，第一次加載的樣式的時(shí)候，會(huì)相對(duì)比較慢，我們是否有一些其他的方法來解決這樣的問題呢？通過我這段時(shí)間的反思，也不知道是否可行，我覺得是有的，不過我的想法可能過于理想化，那么就是前期必須知道頁面的整體風(fēng)格！不過一般在現(xiàn)實(shí)中，還有設(shè)計(jì)師的一些特殊想法，相對(duì)實(shí)現(xiàn)起來可能一些麻煩，下面我們來看看：

1、找出真正的公共樣式

2、每個(gè)頁面中在增加一個(gè)屬于自己頁面的獨(dú)特的樣式

3、通過谷歌的預(yù)加載方法（JS實(shí)現(xiàn)），通過空閑時(shí)間將其他頁面的樣式下載到本地緩存中

其他頁面也是如此，這樣感覺是工作量可能會(huì)大一些，但是我覺得通過這樣的方法，的確可以對(duì)性能是有所提升的，這僅僅是說到CSS，其實(shí)JS也可以使用同樣的方法來解決，還有圖片，等等！

今天就說到這里，在看看，在改改！

最新評(píng)論