方法：1、壓縮css，減少文件體積；2、使用link引入css文件；3、合理設(shè)計CSS布局，注意復用樣式，減少渲染上花的時間；4、少用“*”選擇器；5、慎用浮動、定位等高性能屬性；6、盡量減少頁面重排、重繪；7、屬性值為0時，不加單位等等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS優(yōu)化主要是4個方面：

• 加載性能

  主要是從減少文件體積，減少阻塞加載，提高并發(fā)方面入手

• 選擇器性能

• 渲染性能

• 可維護性、健壯性

下面給大家具體介紹一下。

加載性能：

1、css壓縮：將寫好的css進行打包壓縮，可以減少很多的體積；

2、css單一樣式：當需要下邊距和左邊距的時候，

很多時候選擇：margin: top 0 bottom 0;

但 margin-bottom: bottom;margin-left: left;執(zhí)行的效率更高；

3、減少使用 @import, 而建議使用link, 因為后者在頁面加載時一起加載，前者是等待頁面加載完成之后再進行加載；

4、合理設(shè)計CSS 布局，注意復用樣式，減少渲染上花的時間。class和ID的選擇，少用*這種全局匹配，合理設(shè)置基本樣式（如設(shè)置table{}）提高復用。

選擇器性能：

CSS選擇符是從右到左進行匹配的。當使用后代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；

**避免使用通配規(guī)則**

如*{} 計算次數(shù)驚人！只對需要用到的元素進行選擇

**盡量少的去對標簽進行選擇，而是用class**

如：#nav li{},可以為li加上nav_item的類名，如下選擇.nav_item{}

**不要去用標簽限定ID或者類選擇符**

如：ul#nav,應(yīng)該簡化為#nav

**盡量少的去使用后代選擇器，降低選擇器的權(quán)重值**

后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，