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

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

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

<div class=”list”>

<ul>

<li><span>01</span>測試列表</li>

<li><span>01</span>測試列表</li>

</ul>

</div>

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

.list ul li span{樣式}

.list li span{樣式}

list span{樣式}

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

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

<div>

<ul>

<li><span class=”num”>01</span>測試列表</li>

<li><span class=”num”>01</span>測試列表</li>

</ul>

</div>

結構被我改成了這樣，如果需要對這個span進行修飾的話，自然你也知道應該如何寫啦：

.num{樣式}

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

當然，class的定義與層級的使用的話，還有很多，很多，我在這里就僅僅是舉了一個簡單的例子。如果你與我有不同看法的，請指正。

節(jié)約樣式

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

1、找出真正的公共樣式

2、每個頁面中在增加一個屬于自己頁面的獨特的樣式

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

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

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

最新評論