其實，不規範的css會導致很多效能問題，這些問題可能在一些小的專案中不夠明顯，但是在大型專案中就會顯現出來。
在優化css之前我們需要了解下css是怎麼進行工作的，我們都知道css是由選擇器，屬性和屬性值構成的。
我們可能會這樣寫上一行**
//css.con .loulan1 p span
//html
<
div
class
="con"
>
<
div
class
="loulan"
>
<
p><
span
>文字
span
>
p>
div>
div>
在這裡我們對con類裡面的loulan類裡的p標籤裡面的span標籤進行樣式定義。我說出來都嫌累更別說寫起來了，其實你可以把瀏覽器看作乙個人，它渲染起來肯定也會浪費效能。
而且css的匹配原理不是從左到右的，而是從右到左的，也就是說我們的這行**裡面，先查找到頁面裡面所有的span元素形成乙個集合，再在所有的span元素往上查詢，看看有多span的父元素是p元素或者父元素的父元素是p元素或者......慢慢尋找，把父元素不是p元素的刪去，再往上查詢看集合裡的有p元素又多少它的父元素的類是loulan...瀏覽器說：我好累...
其實呢瀏覽器從右到左進行查詢的好處是為了盡早過濾掉一些無關的樣式規則和元素。並且firefox 稱這種查詢方式為 keyselector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最後(最右邊)的規則，上面的 key 就是 span。人家本來是為了能盡快過濾到一些無關樣式規則的，我們這裡缺一層套一層，層層不停歇。所以只是想定義乙個span的樣式在span上加個類豈不是更好。有人這時要說了，那樣是需要在每個元素上都加上類嗎？那肯定不是必須的，只不過我們要了解瀏覽器是怎麼查詢匹配的，然後結合現在的結構來做出乙個最好的最方便的寫法。
//css.loulanspan
//html
<
div
class
="con"
>
<
div
class
="loulan"
>
<
p><
span
class
="loulanspan"
>文字
span
>
p>
div>
div>
這裡說下css的 id class tag選擇器的權值，也就是他們的優先順序，權值越大，優先順序越高
id:100
class:10
tag:1
有了上面兩個的基礎我們再詳細說下應該怎樣來優化css提高效能
1，減少css巢狀，最好不要套三層以上，一般情況下塊級元素加上類，裡面的內聯元素不用加，css寫的時候塊級class套內聯tag，這樣不僅可以減少css檔案大小，還能減少效能浪費。
2，不要在id選擇器前面進行巢狀，id本來就是唯一的而且人家權值那麼大，前方巢狀完全是浪費效能。
3，建立公共樣式類，把長段相同樣式提取出來作為公共類使用，比如我們常用的清除浮動，單行超出顯示省略號等等等，當然如果你使用sass，繼承會讓你更加方便，同時我是比較提倡使用sass的，之後肯定也會寫一篇sass的部落格。
4，縮寫css，其中包括縮寫maigin，padding，顏色值等等，要是有兩個或者兩個以上的margin-****，寫成margin: * * * *有助於檔案大小。
5，減少萬用字元*或者類似[hidden="true"]這類選擇器的使用，挨個查詢所有...這效能能好嗎？當然重置樣式這些必須的東西是不能少的。
6，有些人喜歡在類名前面加上標籤名：p.ty_p 來進行更加精確的定位，但是這樣往往效率更差，類名應該在全域性範圍除非公用是唯一的，所以這種做法是應該便面的。
7，巧妙運用css的繼承機制，在css中很多屬性是可以繼承的比如顏色字型等等，父節點定義了，子節點就無需定義。
9，不用css表示式，可能大家接觸比較少，但是要記住的是無論我們怎麼炫酷，到了最後都是靜態的，所以表示式只是讓你的**顯得更加炫酷，但是他對效能的浪費可能是超乎你的想象的，因為它並不只是計算一次，一些小的事件可能都會增加它為了有效準確而進行計算求值的次數。
10，少用css rest，可能你會覺得重置樣式是規範，但是其實其中有很多的操作是不必要不友好的，有需求有興趣的朋友可以選擇normolize.css
11，csssprite，合成所有icon，用寬高加上bacgroud-position的背景圖方式顯現出我們要的icon圖，這是一種十分實用的技巧，極大減少了http請求。
當然css效能優化技術可能不僅僅是這些，歡迎朋友補充分享。
CSS效能分析，如何優化CSS提高效能
其實，不規範的css會導致很多效能問題，這些問題可能在一些小的專案中不夠明顯，但是在大型專案中就會顯現出來。在優化css之前我們需要了解下css是怎麼進行工作的，我們都知道css是由選擇器，屬性和屬性值構成的。我們可能會這樣寫上一行 css con loulan1 p span html div c...
CSS效能優化
css是負責布局和渲染的重要角色，漂亮的頁面當然能夠吸引使用者。本文是自己在開發過程中總結的關於css與效能的關係，可能有不對之處，希望能夠指出。1 所有的樣式盡量放在css檔案中，html標籤中不要寫style屬性，因為瀏覽器在所有的樣式載入完成之後，才會開始渲染整個頁面，寫在標籤屬性必會加長瀏覽...
CSS效能優化
css最耗費效能的無疑是動畫效果,其中包含border radius 圓角 box shadows 陰影 transparency 透明色 transforms 變形 filters 濾鏡 動畫效果的優化利用硬體能力.開啟gpu加速 利用translate3d實現動畫位移.而非簡單的top left...