能，這個詞如今被炒的很熱，也是每個開發者，由“知道”、“會做”之后必經的一個“怎樣做好”的階段。性能關乎用戶在不同設備和不同網絡狀態下的體驗。也被多方面因素所影響。此文說說css方面怎樣做到高性能。

高性能css

Html和css本身的性能問題并不突出，在提高可讀性和可維護性的前提下，如果能讓代碼運行和解析的速度更快，則是錦上添花了。

一、css相關的圖片處理

現在的網頁當中，圖片所占的比重以及它的重要性大家都知道。那么如何處理好圖片以及如何為圖片設置樣式，才能讓用戶打開網頁時體驗更好呢？下面給出一些意見：

（1）不給圖片設置尺寸

在我個人的從業經歷當中，有過這樣的情況，我按照設計稿做好了頁面，交給后臺去測試，他就突然跑過來跟我說：hi，你看，這兒出狀況了，我一看，壞菜，圖片出格了，我才想起沒有給圖片定義寬高（直接從設計稿里切的也不需要），然后就犯錯了似的在css樣式里定義了寬高。以至于后來我把這個作為下次再做頁面時候的注意事項。當我看到這一條意見的時候，才更知一二。

來看解釋，第一、設計人員為了畫面的精美，會制作一些超出需求尺寸的圖片；第二、同一張圖片可能會在頁面不同地方多次使用，比如縮略圖、正常圖、大圖。問題來了，如果圖片原始尺寸和實際需求不同，在使用過程中就會存在性能問題，利用樣式縮放會帶來cpu的額外計算過程，增加了圖片在瀏覽器的渲染時間，網絡傳輸過程也會占更多帶寬，增加下載時間。因此，最佳做法是，為需要的部分單獨做一套圖片，初始頁面加載時就能更快展示。

（2）使用css“雪碧圖“

是將零散的圖片合并成一張大圖，在利用css進行背景定位。好處是減少請求數，提高了圖片整體的加載速度。

但它也存在一些缺點：

比如，多張圖片合并成大圖，需要精確計算，仔細的調整位置，單純手工制作是一件很復雜的事情。（所幸現在有一些工具可以幫我們做）

另外，維護過程復雜，要盡量讓已有的圖片保持原來的位置不變，如果是背景圖的尺寸發生變化導致原有區域無法放置，那就只好放棄，如果非要在原有位置修改，則剩余的圖片樣式都需要修改，是很繁瑣的過程。新加的圖片最好放在最后面。

還有就是使用不當會導致性能問題，最大的問題就是內存消耗。如果制作過程不做任何的規劃，隨意擺放，則可能會使圖片變得相當大，從而很占內存。

下面是一些最佳實踐：

1、合理組織“雪碧”圖

如果要把所有的圖片放在一張圖上面，也會有不妥，維護方面也不會很方便。組織背景圖主要按照模塊和背景圖的風格來劃分。比如，作為展示的縮略圖放在一起，評論、點贊、上下箭頭等圖標放在一起等。

2、在項目后期應用css sprite技術

因為一般在開發過程中，會比較頻繁的修改或者更換圖片，如果這個時候使用sprite技術，就會增加很多開發成本。

3、合理控制背景圖單元間的距離及背景圖位置

這個原則是為了防止在背景圖比元素大小更小的時候，區域出現別的無關背景圖

4、控制“雪碧”圖的尺寸和大小

因為大尺寸的圖片會占用大量的內存，所以要控制在合理尺寸，推薦長寬相乘不超過2500，大小在200kb內

5、借助相關工具處理sprite

二、使用高效css選擇器

簡單來說，能被瀏覽器快速解析和匹配的css選擇器，就是高效的選擇器。

首先要知道瀏覽器如何解析css

舉個例子：.nav ul.list li div{}

我們常見的思維是，先去找到nav這個類，再找類包含的ul，再找ul中類為list的后代所有li中所有的div，簡而言之，就是從左到右。可事實是這樣么？么？么？~

事實是相反的！意味著什么呢？就是說它不是從第一個開始去慢慢的縮小范圍，而是從div這個“裸奔”的盒子開始，相當于遍歷，然后再找到li，以此類推，好吧不用我形容你應該知道這當中的消耗。理解這一原理非常重要，高效的選擇器意味著匹配更快，查找次數更少。所以我們定義選擇器時，應該讓第一次匹配時的數量達到最少，并且讓整體的匹配查找次數最少。

以上這些解釋恰恰遵循了這樣一些原則

（1）避免使用通配符

（2）避免使用標簽選擇器和單個屬性選擇器作為關鍵選擇器

（3）不要在id選擇器前加標簽名

（4）盡量不要在選擇符定義過多層級，層級越少，同時也降低了css和dom結構的耦合程度，提高樣式的可維護性

（ps：老實說上面的這些“禁忌”你是不是都有犯過？~）

做個小結，以上所說，有兩點需要知道，第一點在開頭就已經提到，css的性能問題表現的并不突出，特別是在小項目中，所以，可維護性為先；第二點是雖然定義id選擇器，有唯一性的優勢，但是一個頁面只能定義唯一id，定義過多id會使重用性降低，維護更困難，所以不建議多用id。

三、減少css的代碼量

提高網站整體加載速度的一個重要手段，就是提高代碼文件的網絡傳輸速度。除了代碼壓縮，精簡代碼也是一種手段。

（1）定義簡潔的css規則

合并相關規則，定義簡潔的屬性值

合并規則是指比如font-family、font-size、font-weight等等，可以合并為font。 簡潔屬性值，比如顏色值：color，#33AAFF可以簡化為#3AF等。

（2）合并相同定義

網頁中總會有一些模塊有較高相似度，則可把同樣的部分共用一次定義，不同的部分再單獨定義。而且在css中，很多屬性是可以繼承的，則只需要在合適的地方定義一次即可。

（3）刪除無效的定義

無效的定義，并不會影響頁面功能顯示，但會影響頁面展示的性能，增加代碼量的同時，也增加了瀏覽器解析代碼的時間。無效的定義包括無效的規則及無效的樣式屬性，一般是開發過程中引入的，而從直觀上無法判斷，這情況，可以用工具，chrome自帶的工具就可以查找css中的無效樣式。

綜上所述，css能夠用來提高性能的方法還是蠻多的，這里只提及三點，還有更多的提高性能的方法，后續待述，雖然css能夠提高性能，但我們很容易忽略它們，因為它們所帶來的影響似乎沒有那么明顯，而且，很多人可能為了圖方便，任意揮灑著自己的才華，想怎么寫就怎么寫，能達到效果就行，這也有點小消極哈，忘了你的優秀工程師目標了嗎？css規則雖不不難，真正寫好也不易，還是要有些追求極致的精神滴。諸君且寫且珍惜吧！~