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

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

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

• 加載性能

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

• 選擇器性能

• 渲染性能

• 可維護(hù)性、健壯性

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

加載性能：

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

2、css單一樣式：當(dāng)需要下邊距和左邊距的時(shí)候，

很多時(shí)候選擇：margin: top 0 bottom 0;

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

3、減少使用 @import, 而建議使用link, 因?yàn)楹笳咴陧撁婕虞d時(shí)一起加載，前者是等待頁面加載完成之后再進(jìn)行加載；

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

選擇器性能：

CSS選擇符是從右到左進(jìn)行匹配的。當(dāng)使用后代選擇器的時(shí)候，瀏覽器會(huì)遍歷所有子元素來確定是否是指定的元素等等；

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

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

**盡量少的去對(duì)標(biāo)簽進(jìn)行選擇，而是用class**

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

**不要去用標(biāo)簽限定ID或者類選擇符**

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

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

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