web前端性能优化-图片优化实战分享

说在开头    

  项目做完顺利上线了。上线之前的2天做了一点性能上的优化。由于我们这个项目最主要的就是图片。所以，就准备对自己负责的模块的图片和图标进行适当的优化。因为以前看过雅虎军规。所以主要从减少请求数量，图片压缩，以及cssSprite对图片进行一些处理。

---

重点

1. 请求数量

  由于项目开发的时候为了赶进度，所以的icon和图片都是单独一个一个的；看了一些自己负责的会员中心登录和搜索，居然图片有240多张；这就意味着要请求200多次才能加载完所有的图片。

  比较突出的就是会员中心首页，大概有图片20几个，整个的加载比较忙；图片基本是1张或者3,5张一起渲染出来；特别是鼠标的hover事件，很多时候，切换图片出现延时和卡顿。

所以，准备对图片进行分类，整理和合并。也就不可避免的使用cssSprite.

2.cssSprite

首先，为了避免加载不必要的图片；我把图片进行了功能和类别的整理，比如，操作类，删除，编辑，勾勾等；鼠标hover,以及银行图标类，第三方支付，第三方登录，还有一些自己项目组业务想干的图片等等。

比如：

还有一些其他的图片等等。这样200多张图片分类合并以后大概就不到30张的样子；一下子减少了200次请求。而且，页面上图片的加载明显比较流畅。图片基本都是一次渲染出来。

3.图片压缩

说道图片压缩，网上还是有不少在线的压缩图片的网站。

比如：

    图好快：网址：http://www.tuhaokuai.com/

    aTool：网址：http://www.atool.org/pngcompression.php 

    雅虎的：http://smushit.eperf.vip.ac4.yahoo.com/ysmush.it/  等等。

我用的是tinyPng，自我感觉还算比较好用。上手很快直接将图片选择进来，工具和给你自动压缩；压缩完毕后，点击download下载即可。

比如：

    效果还是很明显的。一些图片可以被压缩几十甚至几百倍；一下子压缩了30,50M的量。效果显著。

强烈推荐大家，使用一下。

当然再牛逼一点，直接把图片封装成字体，一次下载，就ok，后面页面的渲染超级快。

好了，写完了。。。也下班了，祝各位国庆快乐！！！！！

转载于:https://blog.51cto.com/shuizhongyue/1699648