css優化，提高效能的方法有哪些

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

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS最佳化主要是4個面向：

• #載入效能

  主要是從減少檔案體積，減少阻塞加載，提高並發方面入手

• 選擇器效能

• #渲染效能

• 可維護性、健壯性

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

載入效能：

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

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

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

#但margin-bottom: bottom;margin-left: left;執行的效率更高；

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

4、合理設計CSS 佈局，注意復用樣式，減少渲染上花的時間。 class和ID的選擇，少用*這種全域匹配，合理設定基本樣式（如設定table{}）提高重複使用。

選擇器效能：

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

**避免使用通配規則**

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

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

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

#**不要去用標籤限定ID或類別選擇符**

如：ul#nav,應該簡化為#nav

**盡量少的去使用後代選擇器，降低選擇器的權重值**

##後代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類別來關聯每一個標籤元素

**考慮繼承**

了解哪些屬性是可以透過繼承而來的，然後避免對這些屬性重複指定規則

渲染效能：

#1、慎重使用高效能屬性：浮動、定位;

2、盡量減少頁面重排、重繪；

重排依照css的書寫順序：

• 位置：positon、top、left、z-index、float、dispay

• 大小：width、height、margin、padding

• ##文字系列： font、line-height、color、letter-spacing

背景邊框：background、 border

#其它：anmation、transition

重繪：border、outline、background、box-shadow，能使用background-color，就盡量不要使用background;

#（學習影片分享：

css影片教學

）

3、去空規則：｛｝；

4、屬性值為0時，不加單位；

5、屬性值為浮動小數0.**，可以省略小數點之前的0；

6、標準化各種瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在後；

7、不使用@import前綴，它會影響css的載入速度；8、充分利用css繼承屬性，減少程式碼量；9、抽象提取公共樣式，減少程式碼量；

10、選擇器優化嵌套，盡量避免層級過深；

11、css雪碧圖，同一頁面相近部分的小圖標，方便使用，減少頁面的請求次數，但是同時圖片本身會變大，使用時，優劣考慮清楚，再使用;

12、將css文件放在頁面最上面

可維護性、健壯性：

###1、將具有相同屬性的樣式抽離出來，整合並透過class在頁面中進行使用,提高css的可維護性；######2、繼上一條，oocss也是提高css性能的途徑之一，透過定義可重複使用的、語義化良好的基礎類，然後添加到html中，這也是許多ui框架都在使用的一種方法，例如：class="btn btn-active btn-blue"；######3、樣式與內容分離：講css程式碼定義到外部css中；### ###4、容器與樣式分離；######更多程式相關知識，請造訪：###程式設計影片###！ ！ ###

以上是css優化，提高效能的方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！