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

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

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

<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的定義，我們可以這樣寫(xiě)：

.list ul li span{樣式}

.list li span{樣式}

list span{樣式}

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

如果使用第一種方法，我個(gè)人覺(jué)得太長(zhǎng)了，沒(méi)有必要，那如果使用第三種寫(xiě)法呢？怕的是如果在這個(gè)div與ul平級(jí)也有span的時(shí)候，這時(shí)候這個(gè)span也會(huì)被繼承到樣式，我個(gè)人平時(shí)都比較喜歡第一種寫(xiě)法，相對(duì)來(lái)說(shuō)，對(duì)span比較安全，而且可以節(jié)約幾個(gè)字符吧！嘿嘿！但是我的這種寫(xiě)法通過(guò)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)該如何寫(xiě)啦：

.num{樣式}

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

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

節(jié)約樣式

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

1、找出真正的公共樣式

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

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

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

今天就說(shuō)到這里，在看看，在改改！

最新評(píng)論