# 页面优化 [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)