最近在看《web全栈工程师的自我修养》一书，作者是来自腾讯的前端工程师。作者在做招聘前端的时候问应聘者web新能优化有什么了解和经验，应聘者思索后回答“在发布项目之前压缩css和 Javascript源代码。这样文件体积就变小了，用户加载必要资源所花费的时间就更短了”。作者追问还有吗，应聘者答不上来了。
作者在书中附上的更多的web性能优化经验。其中我详细补充了很多
- 压缩源码和图片
- JavaScript 文件源代码可以采用混淆压缩（）的方式，css文件源代码进行普通压缩，jpg图片可以根据质量压缩为50%到70%，PNG可以用一些开源软件来压缩，比如24色变成8色，去掉一些PNG格式信息等。
- js代码混淆压缩工具 站长工具：http://tool.chinaz.com/js.aspx
- png格式,压缩工具 https://tinypng.com/
- 腾讯出品的压缩工具：智图 http://zhitu.isux.us/
- 选择合适的图片格式
- 如果图片颜色比较多就用JPG格式，如果图片颜色比较多就用JPG格式，较少就用PNG格式，透明的图片都用PNG格式，如果能够通过服务器判断浏览器支持webP格式，那就用WebP格式和SVG。
- 其中webP格式是谷歌大力推崇的图片格式，体积比PNG小45%。关于WebP格式的具体请看https://isux.tencent.com/introduction-of-webp.html
- 合并静态资源
- 包括CSS,Javascript和小图片，减少HTTP请求
- 第一种：使用css精灵图sprites（也有人称为雪碧图），将小图标全部放在一张图片上（可以使用这个网站来制作雪碧图 http://csssprites.com/），通过background-position属性来偏移图片。节省了大量的http请求。缺点当然有，需要耐心调整图片位置。
- 第二种：使用iconfont字体，图片以字体的形式展现，注明的bootstrap框架就用到了这个技术。国内比较著名的免费开源iconfont是阿里是Iconfont(http://iconfont.cn/),可以根据自己的需求选择不同的兼容文件，低至IE6.
其中小图片的优化我我知道的有2种，
- 开启服务端的Gzip压缩
- 对文本资源非常有效，对图片资源则没那么大的压缩比率。
- 使用CDN
- 一些公共库可以使用第三方提供的静态资源地址，（比如jquery,Normalize.css），一方面增加并发下载量，另一方面能够和其他网站共享缓存。
- 免费的cdn网站 http://www.bootcdn.cn/
- 延长静态资源缓存时间
- 这样频繁访问网站的访客就能够更快的访问，不过这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。
- 把css放在页面头部，把JavaScript 放在页面底部
- 这样就不会阻塞页面渲染，让页面长时间的空白。
