經常使用CSS優化總結——網絡性能與語法性能建議

在前端面試中最多見的問題就是頁面優化和緩存（貌似也是頁面優化），被問了幾回後心虛的不行，平然平時多少會用到一些，但忽然問我，很難把本身知道的都說出來。頁面優化明顯不是一兩句可以說完的，這兩天總結了一下CSS相關的優化知識，寫篇博客梳理一下，還望你們多多指教

關於CSS的優化工做主要從兩個方面着手

• 網絡性能：把CSS寫到字節數最少，加快下載速度，天然可讓頁面渲染的更快一些
• 語法性能：一樣都能實現某些效果，但並非全部的方式效果都相同，咱們看過很多關於JavaScript方面的語法優化知識，其實CSS裏面也有一些

CSS壓縮

CSS壓縮並非什麼高端的姿式，但卻頗有用，其原理很簡單，就是把咱們CSS中沒用的空白符等刪去，達到縮減字符個數的目的

咱們有這樣一段CSS腳本

.test{
    background-color:#ffffff;
    background-image:url(a.jpg);
}

通過壓縮後會變成這樣

.test{ background-color:#fff;  background-image:url(a.jpg)}

固然高級些的壓縮工具也會幫咱們優化一些語法，提供不少選項，讓咱們的壓縮更有控制，以前在的公司不採用CSS壓縮，因此我沒有什麼實踐經驗，本身寫東西經常使用的是YUI Compressor，有不少在線版的很方便

YUI Compressor

CSS Compressor

CSS drive

Clean CSS

你們有什麼好的資源但願也推薦一下

gzip壓縮

Gzip是一種流行的文件壓縮算法，如今的應用十分普遍，尤爲是在Linux平臺，這個不止是對CSS，當應用Gzip壓縮到一個純文本文件時，效果是很是明顯的，大約能夠減小70％以上的文件大小（這取決於文件中的內容）。想進一步瞭解gzip看看維基百科。

在沒有gzip壓縮的狀況下，Web服務器直接把html頁面、CSS腳本、js腳本發送給瀏覽器，而支持gzip的Web服務器將把文件壓縮後再發給瀏覽器，瀏覽器（支持gzip）在本地進行解壓和解碼，並顯示原文件。這樣咱們傳輸的文件字節數減小了，天然能夠達到網絡性能優化的目的。gzip壓縮須要服務器的支持，因此咱們須要在服務器端進行配置

在IIS上啓用Gzip壓縮(HTTP壓縮)

apache啓用gzip壓縮方法

Nginx Gzip 壓縮配置

固然除了gzip壓縮，緩存也是咱們須要注意的，這和CSS優化關係不大了，在說web優化的時候再說

合寫CSS

除了壓縮的方式，咱們還能夠經過少寫CSS屬性來達到減小CSS字節的目的，拿個最多見的例子

.test{
 background-color: #000;
 background-image: url(image.jpg);
 background-position: left top;
 background-repeat: no-repeat;
}

咱們能夠改寫一下上面的CSS，達到一樣的效果

.test{
  background: #000 url(image.jpg) top left no-repeat;
} 

在CSS中還有不少相似的屬性能夠合寫

font

{font-style: oblique; font-weight: bold; font-size: 16px; font-family: Helvetica, Arial, Sans-Serif;}

{font: oblique bold 16px Helvetica, Arial, Sans-Serif;} 

margin/padding

{margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 15px;}

{margin: 5px 10px 20px 15px;} 

{padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;}

{padding: 5px 10px}

{padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;}

{padding:5px;}

background

{background-color: #000; background-image: url(image.jpg); background-position: left top; background-repeat: no-repeat;}

{background: #000 url(image.jpg) top left no-repeat;} 

border

{border-width: 2px; border-style: solid; border-color: #000;}

{border: 2px solid #000;}

{border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;}

{border: 2px 5px 10px 3px;}

另外CSS3添加的不少屬性如transform、animation相關的均可以合寫，不一一列舉，你們用的時候要注意

利用繼承

CSS的繼承機制也能夠幫咱們再必定程度上縮減字節數，咱們知道CSS有不少屬性是能夠繼承的即在父容器設置了默寫屬性，子容器會默認也使用這些屬性，所以若是咱們但願全文字體尺寸是14px，大可沒必要爲每一個容器設置，只須要在body上設置就能夠了。應用這個技巧，把CSS屬性在可能的狀況下提到父容器是能夠幫咱們節省CSS字節的，順便說一下哪些屬性能夠繼承

• 全部元素可繼承：visibility和cursor
• 內聯元素和塊元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
• 塊狀元素可繼承：text-indent和text-align
• 列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image
• 表格元素可繼承：border-collapse
• 不可繼承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi

css中能夠和不能夠繼承的屬性 

抽離、拆分CSS，不加載全部CSS

抽離CSS是指把一些通用的CSS放到一個文件內，而不是寫道各個頁面，這樣一次下載後，其它頁面用到的時候就能夠利用緩存了，減小沒必要要的重複下載。

應用抽離原則，在不少時候咱們把頁面通用的CSS寫到了一個文件，這樣加載一次後就能夠利用緩存，但這樣作並不適合全部場景，之前我寫CSS把一些前端插件用的CSS全寫到了一個頁面，可是有時候頁面只會用一個Dialog、有的頁面只用到了一個TreeView，但卻把十多個插件的CSS都下載到了頁面，這就是問題了，因此雖然把CSS寫道一個文件能夠減小http請求，但像剛纔的這種狀況是不該該這樣作的，對一些全部頁面都會用到的咱們能夠這樣作，因此咱們在抽離和拆分的時候可要想好了。

CSS sprites

 這個其實算不上是CSS優化，應該說是web優化用到了CSS的技巧，順便提一下，有興趣同窗能夠看看使用CSS sprites減小HTTP請求。

 

網絡性能方面能想到的就暫時這麼多了，但願你們幫忙指正和補充，看一些語法上的性能優化

CSS放在head中，減小repaint和reflow

相信作web的同窗都知道這條建議，但爲何CSS放在頁面頂部有利於網頁優化呢？瀏覽器渲染頁面大概是這樣的，當瀏覽器從上到下一邊下載html生成DOM tree一邊根據瀏覽器默認及現有CSS生成render tree來渲染頁面，當遇到新的CSS的時候下載並結合現有CSS從新生成render tree，剛纔的渲染工做就白費了，若是咱們把全部CSS都放到頁面頂部，這樣就沒有從新渲染的過程了。對瀏覽器工做原理有興趣的同窗能夠看看神文

瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕，相信會對瀏覽器工做原理有深刻的認識。

相似的咱們知道了這個也應該在腳本中注意儘可能減小repaint和reflow，什麼狀況會致使這兩種狀況呢

reflow：當DOM元素出現隱藏／顯示、尺寸變化、位置變化的時候都會讓瀏覽器從新渲染頁面，以前渲染工做白費了

repaint：當元素的背景顏色、邊框顏色不引發reflow的變化是會讓瀏覽器從新渲染該元素。貌似還能夠接受，但若是咱們在開始就定義好了，不讓瀏覽器重複工做就更好了。 

不用CSS表達式

不管怎樣生成的CSS，最終咱們放到頁面上得是靜態普通文本，沒有變量、計算神馬的，CSS表達式是一種動態設置CSS屬性的東東，被IE5-IE8支持，看一個你們經常使用的例子

body {
  background-color: expression((new Date()).getHours()%2?"#B8D4FF":"#F08A00");
}

 這樣咱們賦予了CSS相似JavaScript的功能，CSS表達式很是強大，甚至可使用CSS表達式實現 min-width 屬性，隔行換色，模擬 :hover, :before, :after 等僞類，看起來能解決不少IE下的瀏覽器兼容性等問題，可是其帶來的反作用超出咱們的想象，這條CSS規則並非只運行一次，爲了確保有效性，CSS表達式會進行頻繁的求值，當改變窗口大小，滾動頁面甚至移動鼠標都會觸發表達式進行求值，如此頻繁的求值以致於瀏覽器的性能收到嚴重的影響。據《高性能網站建設建議》中的測試其執行次數遠遠超出咱們想象，感興趣同窗能夠進去看看，咱們的建議就試儘可能避免甚至不要使用CSS表達式。

不亂用CSS reset或屬性設置

在網站建設中咱們常用一些CSS reset，達到跨瀏覽器統一的目的，可是不少時候咱們的CSS reset過於臃腫，主要有兩個問題

1. 把不少瀏覽器對元素的默認屬性有設置了一邊，好比div的padding和margin爲0啊什麼的，這是沒有必要的
2. 把一些很不經常使用的元素的設置也寫進了CSS reset，如 ruby這樣的元素

前幾天寫了篇關於CSS reset的博客常見標籤的默認屬性值及相互做用——關於CSS reset的思考，都是一些我的認識，但願你們批評指正

避免適用通配符或隱式通配符

CSS中的*表明通配符，雖然好用但使用不當這也是一個惡魔，好比

body * {padding:0;margin:0;} 

咱們覺得這是對body的子結點都設置一些屬性，但由於CSS繼承特性的緣由，頁面全部元素都會接受這個規則，對於複雜的頁面在性能上的影響仍是很大的，這並非說不能使用通配符，而是說使用的時候要注意範圍。相信這個規則你們都知道，可是有一些隱式的通配符也須要咱們的注意，好比

:visible{
  padding:0;
}

這樣的幾乎就和通配符同樣，在使用的時候必定要注意範圍限制問題

避免層級或過分限制的CSS

估計web開發的同窗都看過MDN上Writing efficient CSS或者其各類翻譯版本，文中總結了幾點在書寫CSS selector的意見，搞明白文中建議的一個前提是得知道CSS是從右到左解析的，而不是咱們認爲的從左到右，關於爲何這樣作確定是由於高效，不明就裏的同窗能夠上網搜一下相關知識。

抄襲一下文章內容

不要用標籤或 class 來限制 ID 規則

這個應該是個常識，但不少同窗都會誤用，寫出#test.info或者div#test這樣的選擇器，這個只能說是多此一舉，id已經能夠惟一併且最快的定位一個元素了

不要用標籤名限制 class 規則

 這個估計被誤用的更多，如div.info這樣的寫法，其實咱們能夠直接寫爲.info，從右到左解析的緣由能夠知道爲何其低效，若是直接使用class不能達到目的，通常狀況下應該是class設計的有問題，CSS須要重構了

儘可能使用最具體的類別、避免後代選擇器、屬於標籤類別的規則永遠不要包含子選擇器

這三條規則是想通的，由於從左到右解析關係，在CSS選擇器中後代選擇器非但沒有幫咱們加快CSS查找，反而後代選擇器是 CSS 中耗費最昂貴的選擇器。 它的耗費是極其昂貴的—特別是當選擇器在標籤或通用類別中，做者給的建議是當使用子選擇器時要十分謹慎，能免則免。其開銷可見一斑了。

對此咱們能夠經過具體類別——使用單一或儘可能少的class解決。

最後

日常用到和了解的關於優化CSS達到頁面優化的手段就這些了，但願你們給出意見和補充。