css如何優化并提高性能

小編給大家分享一下css如何優化并提高性能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

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

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;

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如何優化并提高性能”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！