web前端性能优化一图片优化

1、减少http请求，合理设置 HTTP缓存

  每个http请求需经历这些过程：建立通信链路、数据传输、关闭链路，而在服务器端也需要线程开销，每个http都需要独立的线程去处理，减少http请求的数目可有效提高访问性能。

        a、减少http的主要手段是合并图片（主要是零散的小图片、icon图等）。将浏览器一次访问需要的图片合并成一张，这样浏览器就只需要一次请求。如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

        b、小图转base64，嵌入到样式文件中

        c、缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。假设某网站首页，当浏览器没有缓存的时候访问一共会发出 78个请求，共 600多 K数据，而当第二次访问即浏览器已缓存之后访问则仅有 10个请求，共 20多 K数据。 (这里需要说明的是，如果直接 F5刷新页面的话效果是不一样的，这种情况下请求数还是一样，不过被缓存资源的请求服务器是 304响应，只有 Header没有Body，可以节省带宽 )

        怎样才算合理设置 ?原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。关于 HTTP缓存的具体设置和原理此处就不再详述了。

2、使用浏览器缓存

        对一个网站而言，logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。

       使用浏览器缓存策略的网站在更新静态资源时，应采用逐量更新的方法，不宜把多个文件一次全部更新，而是应该一个文件一个文件逐步更新，并有一定的间隔时间，避免用户浏览器忽然大量缓存失效，集中更新缓存，造成服务器负载骤增、网络堵塞的情况。

3、CSS Sprites

合并 CSS图片，减少请求数。

4、LazyLoad Images

        能在页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。

5、CDN加速

CDN仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快速度获取数据

6、图片量非常大的场景下，可使用独立文件服务器，使用nginx做负载均衡

7、使用Chrome Dev Tool排查问题

       

8、最简单的方法，压缩图片

        网上有很多工具可以做无损压缩，压缩效果非常好，减少60%~90%的图片大小，如下面这个网址：ddk123.cn