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 放在页面底部
  • 这样就不会阻塞页面渲染，让页面长时间的空白。