廣州這熱天氣越來越變態(tài)了，熱但狭！披诗，回歸正傳，css是一門很有學問的知識立磁，可能有些人會覺得css不過如此呈队，我只需要記住幾個常用屬性的設(shè)置就可以掌握css，號稱精通css了唱歧。但是宪摧，css不是表面看起來那樣簡單的，要寫出性能更好颅崩，更簡潔并且更加有拓展性的css沒有積累和沉淀是不可能完成的几于。今天的主題是css優(yōu)化方面，可能你在網(wǎng)上看到過類似文章沿后，但我相信沿彭，我的這篇文章多少會對你有幫助的！
一尖滚、css引入方式
1喉刘、直接在標簽中使用style書寫css樣式
2瞧柔、html中使用style
3、使用@import引用外部CSS文件
4睦裳、使用link引用外部CSS文件
這四種方法非剃，按理來說，我們用的最多的應該是第四種方法了推沸，確實如此，樣式與結(jié)構(gòu)分離是最好的原則券坞。第一第二種方案鬓催，有人覺得可能更加方便，不引入外部文件恨锚，減少了css文件的http請求宇驾，但是這種css的書寫方式對頁面的維護與調(diào)試造成更大的影響，是不建議采取的猴伶，當我們網(wǎng)頁的css更多更大了课舍，首先是不利于閱讀的，其次他挎，調(diào)試也是相對于外部css要困難的筝尾。第三種方法@import引入的css也是可以的。對于@import簡單介紹一下：@import指定導入的外部樣式表及其目標媒體办桨。該規(guī)則必須在樣式表頭部最先聲明筹淫。并且其后的分號是必需的，如果省略了此分號呢撞，外部樣式表將無法正確導入损姜，并會生成錯誤信息。
例如
@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);
兼容性是非常不錯的殊霞〈菰模基本上都支持，出來古老的IE6和IE7绷蹲。言歸正傳棒卷。使用@import導入式會在整個網(wǎng)頁裝載完后再裝載CSS文件，因此這就導致了一個問題祝钢，如果網(wǎng)頁比較大則會兒出現(xiàn)先顯示無樣式的頁面娇跟，閃爍一下之后，再出現(xiàn)網(wǎng)頁的樣式太颤。這是導入式固有的一個缺陷苞俘。@import影響css文件的加載速度，為了性能優(yōu)化龄章，我們使用link方式引入css吃谣。
二乞封、css的簡寫
很多時候，我們書寫的css樣式里面會出現(xiàn)類似
div{ display:block; width:100%; margin-top:20px; margin-bottom:20px; margin-left:20px; margin-right:20px;}
1岗憋、當然了肃晚，這么簡單的css簡寫，我相信大家是可以搞定的仔戈，我也只是來強調(diào)這個問題而已了关串。首先，我們知道div是塊級元素监徘，塊級元素的display:block,當一個元素的display為block時候晋修，那么它的width是100%;也就是說上面display:block;和width完全是可以省略的，還有凰盔，margin可以簡寫成margin:20px;簡寫四個值分別是上右下左墓卦，簡寫三個值就是上 左右 下，簡寫為一個户敬。類似的css簡寫形式還有很多落剪。例如
.class{ border-color:#fff; border-style:solid; border-width:1px;}
簡寫
.class{border:1px solid #fff;}
還有字體屬性font,background,padding等等，對于那些可以簡寫的盡量精簡代碼尿庐。比如顏色值忠怖，建議用小寫.class{color:#FFFFFF;}簡寫.class{color:#fff;}如果顏色每兩位的值相同，可以縮寫一半
2抄瑟、有的屬性值為0的時候脑又，我們可以不加單位，例如
.class{ width:0; left:0;}
要養(yǎng)成寫css都用簡寫形式锐借，多去觀察css代碼中问麸，有的東西是可以不要的，有的東西是可以簡寫優(yōu)化的钞翔，千萬不要覺得這沒什么严卖，積少成多的，厚積薄發(fā)布轿。好的css書寫習慣和更加精簡的書寫方式能節(jié)省css文件的大小哮笆，優(yōu)化網(wǎng)站整體性能，更加容易閱讀汰扭。
這些好處是會在以后的項目越做越大的時候體現(xiàn)出來稠肘。專業(yè)的人一看你寫的css代碼風格就能了解你的水平了÷苊可能有的人書寫css的時候喜歡按照相關(guān)的屬性聲明應當歸為一組项阴，一定順序排列。這樣書寫也是可以很工整的笆包，并且subline還有相關(guān)插件可以按照我們自己設(shè)置的規(guī)則去設(shè)置环揽。個人覺得這個是完全可以的略荡，樣式寫的很工整。（慚愧啊歉胶，我一直都是按照自己想法來排順序的汛兜，對這種寫法比較支持，雖然沒有對樣式文件減少大型ń瘛）.
3粥谬、多利用css繼承的特性，不用每一個選擇器上都寫一大堆可以從祖先元素基礎(chǔ)下來的的屬性辫塌，可以基礎(chǔ)的屬性有很多漏策，例如
font、text-index璃氢、text-align、line-height狮辽、color一也、text-transform、word-spacing喉脖、visibility等等
我們也不需要去記住他們椰苟，css手冊一查就可以了解了，并且我們用多了自然而然就可以很清楚的知道树叽∮吆可能有幸情況很特殊，例如我在a的父元素設(shè)置了color题诵，為什么a的color沒有繼承下來呢洁仗？因為有些標簽的屬性有默認的值，例如表單元素性锭，鏈接等等赠潦，具體可以參考下http://css.doyoe.com/
三、css背景精靈圖
CSS Sprites在國內(nèi)很多人叫css精靈草冈，是一種網(wǎng)頁圖片應用處理方式她奥。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來怎棱，當訪問該頁面時哩俭，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網(wǎng)絡(luò)流行的速度而言拳恋，不高于200KB的單張圖片的所需載入時間基本是差不多的凡资，所以無需顧忌這個問題。CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中谬运，再利用CSS的“background-image”讳苦，“background- repeat”带膜，“background-position”的組合進行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置鸳谜。在網(wǎng)頁訪問中膝藕，客戶端每需要訪問一張圖片都會向服務(wù)器發(fā)送請求，所以咐扭，訪問的圖片數(shù)量越多芭挽，請求次數(shù)也就越多，造成延遲的可能性也就越大蝗肪。所以袜爪，CSS Sprites技術(shù)加速的關(guān)鍵，并不是降低質(zhì)量薛闪，而是減少個數(shù)辛馆，當然隨之而來的增加內(nèi)存消耗，CSS Sprites圖片繁瑣的合成等缺點在網(wǎng)站性能的提升前豁延，也就不足為道了昙篙。
類似于上圖，如果把一個一個圖標都單獨弄出來用的話诱咏，是非常方便的苔可，但是，每多一個圖片文件就是多一個HTTP請求了袋狞，為了更好的性能焚辅，建議在不是很復雜的情況下能用CSS Sprites就盡量用。
四苟鸯、css選擇器優(yōu)化
說到這個css選擇器的優(yōu)化同蜻，我們應該要知道，瀏覽器對css選擇器是怎么匹配的早处，比如 .class span 瀏覽器是怎么“定位”到span的埃仪。首先我們先拋出結(jié)論，css的匹配規(guī)則是從右往左的陕赃，沒錯卵蛉，不是從左到右。css會先找到選擇權(quán)最右邊的那個選擇符么库，然后再往左邊不斷往上找傻丝。這個 .class span中，首先會找到所有的span元素诉儒，然后再找span的父級元素是否有類名class葡缰，找不到再往祖先元素找，知道找到符合span的祖先元素為類名.class為止。最簡單粗暴的方法就是直接給span一個類名泛释，或者ID滤愕，但是那也是不現(xiàn)實的，只能說怜校，我們要根據(jù)實際情況來找適合的解決方案了间影。
比如說，我們應該盡量減少css后臺選擇器過長的情況茄茁，這樣的選擇器效率是不高的魂贬。在頁面上，建議同意用類名來命名裙顽，不要用ID付燥，不是說ID不好，而是類名更加合適愈犹。
說到這個ID键科、Class之類的，隨便了解下css選擇器的優(yōu)先級
ID:100
Class:10
Tag:1
css的權(quán)重中漩怎，ID是最大的勋颖，類名次之，標簽最小扬卷。這個數(shù)字有什么用呢牙言，舉個例子
html
<div id="div" class="div">測試<div>
css
#div{ background:red}
.div{ background:orange;}
div{ background:yellow;}
如果不知道css選擇器權(quán)重的話酸钦，我們可以會覺得div的背景顏色是yellow怪得，因為后面的會覆蓋前面所寫的。但實際上不是得卑硫，div的背景是red徒恋，因為，ID權(quán)重為100欢伏，類名權(quán)重為10入挣，標簽最小為1，是按這個css的優(yōu)先級來計算最后用什么樣式的硝拧，如果是組合選擇器的話径筏，做加法運算就可以了。比如
#div a{} /*優(yōu)先級101*/.div li{} /*優(yōu)先級11*/body .div a{} /*優(yōu)先級12*/
這個也是可以做為css優(yōu)化的又一個點了障陶，選擇器性能越好滋恬，網(wǎng)站的性能就越好！建議選擇器的嵌套最好不要超過三層抱究。
五恢氯、減少css動畫渲染的性能損耗
盡可能多的利用硬件能力，如使用3D變形來開啟GPU加速
-webkit-transform:tanslate3d(0,0,0);
3D變形會消耗更多的內(nèi)存與功能，應確實有性能問題時采取使用它勋拟，兼在權(quán)衡
在條件允許情況下勋磕，盡可能少的使用box-shadow與gradient，他們對瀏覽器渲染性能損耗比較大敢靡，尤其在同一個元素同時使用了他們挂滓。
盡量的讓動畫元素不在文檔流中，以減少重排（關(guān)于瀏覽器渲染頁面是的重排與重繪醋安，下次我們再討論）杂彭，這里簡單說下
參考與伯樂在線文章http://blog.jobbole.com/46722/
瀏覽器從下載文檔到顯示頁面的過程是個復雜的過程，這里包含了重繪和重排吓揪。各家瀏覽器引擎的工作原理略有差別亲怠，但也有一定規(guī)則。簡單講柠辞，通常在文檔初次加載時团秽，瀏覽器引擎會解析HTML文檔來構(gòu)建DOM樹，之后根據(jù)DOM元素的幾何屬性構(gòu)建一棵用于渲染的樹叭首。渲染樹的每個節(jié)點都有大小和邊距等屬性习勤，類似于盒子模型（由于隱藏元素不需要顯示，渲染樹中并不包含DOM樹中隱藏的元素）焙格。當渲染樹構(gòu)建完成后图毕，瀏覽器就可以將元素放置到正確的位置了，再根據(jù)渲染樹節(jié)點的樣式屬性繪制出頁面眷唉。由于瀏覽器的流布局予颤，對渲染樹的計算通常只需要遍歷一次就可以完成。
重繪是一個元素外觀的改變所觸發(fā)的瀏覽器行為冬阳，例如改變visibility蛤虐、outline、背景色等屬性。瀏覽器會根據(jù)元素的新屬性重新繪制，使元素呈現(xiàn)新的外觀肘交。重繪不會帶來重新布局，并不一定伴隨重排饲常。
開發(fā)中，比較好的實踐是盡量減少重排次數(shù)和縮小重排的影響范圍狼讨。這部分討論已經(jīng)超出css了贝淤，我們先交流有關(guān)css的知識。
六熊楼、壓縮css文件
最后寫好樣式后霹娄，還可以對css進行壓縮能犯，來減少css文件的體積。對于一個壓縮文件犬耻，比如一個文件style.css踩晶，我們壓縮后可以改為style.min.css,網(wǎng)上有很多在線工具，可以搜索一下自己喜歡的壓縮工具枕磁，我個人喜好是用http://tool.oschina.net/codeformat/css
本文的全部內(nèi)容就到這了渡蜻，歡迎大家留言補充。會不定時的更新有關(guān)css優(yōu)化的知識~
歡迎訪問我的個人網(wǎng)站zhengyepan
原創(chuàng)文章计济，轉(zhuǎn)載請注明出處茸苇，謝謝歡迎一起討論交流
