web性能优化 来自《web全栈工程师的自我修养》

最近在看《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请求

  其中小图片的优化我我知道的有2种，

  • 第一种：使用css精灵图sprites（也有人称为雪碧图），将小图标全部放在一张图片上（可以使用这个网站来制作雪碧图 http://csssprites.com/），通过background-position属性来偏移图片。节省了大量的http请求。缺点当然有，需要耐心调整图片位置。
  • 第二种：使用iconfont字体，图片以字体的形式展现，注明的bootstrap框架就用到了这个技术。国内比较著名的免费开源iconfont是阿里是Iconfont(http://iconfont.cn/),可以根据自己的需求选择不同的兼容文件，低至IE6.
• 开启服务端的Gzip压缩
  • 对文本资源非常有效，对图片资源则没那么大的压缩比率。
• 使用CDN
  • 一些公共库可以使用第三方提供的静态资源地址，（比如jquery,Normalize.css），一方面增加并发下载量，另一方面能够和其他网站共享缓存。
  • 免费的cdn网站 http://www.bootcdn.cn/
• 延长静态资源缓存时间
  • 这样频繁访问网站的访客就能够更快的访问，不过这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。
• 把css放在页面头部，把JavaScript 放在页面底部
  • 这样就不会阻塞页面渲染，让页面长时间的空白。