# 頁面優化 [TOC] ## css優化部分 #### CSS壓縮 CSS壓縮并不是什么高端的姿勢，但卻很有用，其原理很簡單，就是把我們CSS中沒用的空白符等刪去，達到縮減字符個數的目的 很多在線版的很方便: * [YUI Compressor](http://ganquan.info/yui/?hl=zh-CN) * [CSS Compressor](http://csscompressor.com/) * [CSS drive](http://www.cssdrive.com/index.php/main/csscompressor) #### gzip壓縮 Gzip是一種流行的文件壓縮算法，現在的應用十分廣泛，尤其是在Linux平臺，這個不止是對CSS，當應用Gzip壓縮到一個純文本文件時，效果是非常明顯的，大約可以減少70％以上的文件大小（這取決于文件中的內容）。想進一步了解gzip看看維基百科。 沒有gzip壓縮的情況下，Web服務器直接把html頁面、CSS腳本、js腳本發送給瀏覽器，而支持gzip的Web服務器將把文件壓縮后再發給瀏覽器，瀏覽器（支持gzip）在本地進行解壓和解碼，并顯示原文件。這樣我們傳輸的文件字節數減少了，自然可以達到網絡性能優化的目的。gzip壓縮需要服務器的支持，所以我們需要在服務器端進行配置 ####合寫CSS 除了壓縮的方式，我們還可以通過少寫CSS屬性來達到減少CSS字節的目的 ####利用繼承 #### CSS sprites #### CSS放在head中，減少repaint和reflow #### 避免層級或過度限制的CSS ##JavaScript 優化部分 (TODO) 以后寫 ## 圖片優化 ### 利用雪碧圖 ### 壓縮圖片 [在線壓縮圖片](http://www.secaibi.com/tools/) [騰訊智圖](http://zhitu.isux.us/) ### 共用圖片 ### webp 格式壓縮 ### svg圖形使用 ## 上線優化 可以使用服務器上的一些CDN加速訪問,常用的cdn參見 ## 參考 [前端頁面優化W3cFun](http://www.w3cfuns.com/article-1283-1.html) [前端工程與性能優化](https://github.com/fouber/blog/issues/3)