网站性能优化——content方面之减少http请求

     虽然HTTP 1.1 中已经支持了持久连接-keep-alive（一个TPC/IP连接中，可以连续发起多次HTTP请求）与采用“管线化”技术，能够做到同时并行发送多个HTTP请求。但优化是无止境的，所以还是有必要考虑通过有效的减少HTTP请求数量优化网站的性能。

 一、合并资源

合并资源优点：
合并文件是最常见的做法。http协议是无状态的应用层协议，每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，而合并资源的优点不止是减少http请求的数量，还可以减少请求资源的大小,减少http请求的数量和减少请求资源的大小可有效提高访问性能；

合并资源缺点：
如果合并后的文件很大，下请求后下载是花费较长的时间，反而会延长网站的渲染时间。

合并资源手段：

主要是合并CSS、合并JS与合并图片。将游览器一次访问需要获取的js与css文件合并成一个文件，游览器只要一次请求就可以获取到所需要的文件。

图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。将图片base64，这样也可以减少请求。

在合并工具方面，可以使用gulp与webpack等项目构造工具对js与css文件进行压缩与合并。但是仅仅是考虑到减少http请求数量而对文件采取合并是有点片面的。

二、在图像方面使用css精灵（也叫雪碧图）

CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

雪碧图优点：

1、利用CSS Sprites能够减少浏览器向服务器的请求次数，减少http请求，从而提高页面的性能，这是图片精灵的最显著特点，也是被广泛应用的主要原因。

2、利用图片精灵还能减少图片的字节，你使用9张小的图片，一张4KB，9张就是36KB，而把他们都放一张图片上，只需要4KB到5KB就可，所以减少图片字节也是显而易见的。

3、在整理图片的过程中，不需要再纠结如此大量图片的名字问题，多张放在一张上，只需要取一个综合的名字就可以了，如此便提高了工作效率。

4、如果想改变网站风格，你只需要处理一张图片就可以了，把一张图片的颜色和风格一改，那么整个网站的风格就都变了，便于后期的维护和修改。

雪碧图缺点：

1、在应用精灵图片的时候，你需要考虑当前盒子会不会漏出其他的背景图，这个还好，比较头疼的是，页面自适应时，背景图的位置就没那么容易掌控了。

2、制作精灵图的过程比较繁琐，你需要处理好每张图之间的距离和位置，如果做得不合理，那么使用起来就比较麻烦了，甚至需要单独创建一个空的盒子来装背景图。

3、使用精灵图的页面后期维护带来了繁琐，因为他是多张图在一张图上，牵一发而动全身的感觉，你改变一张背景图，如果大小发生变化，那么其他的你就得动，只要你动了，那么所有的背景定位都将需要改变，所以一旦需要更改背景图的话，轻易不要改变其他图片的位置，原位能放下就在原位改，放不下就在下面添加。

注意：

背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。

三、使用inline images

通过使用data:URL模式可以在Web页面中包含图片但无需任何额外的HTTP请求。(IE不支持,这种基本没什么用处)

<img src="https://img-blog.csdnimg.cn/2022010620235298889.gif">

还有一个缺点就是大小限制。Firefox最多支持100k的内联图片.

四、利用游览器缓存

如果图片或者脚本，样式文件内容比较固定，不经常被修改，那么，尽可能利用缓存技术，减少HTTP请求次数或文件下载次数。

命中浏览器缓存分为两类：强缓存，协商缓存。

• 强缓存：不会发起HTTP请求，直接从浏览器缓存中读取文件。
  • HTTP 1.0中，采用Expires头指定资源过期时间；
  • HTTP 1.1中，采用Cache-Control: max-age指定资源被缓存多久；
• 协商缓存：向服务器发起HTTP请求，如果资源文件并未更新，response响应码即为304，随后从浏览器缓存中下载该文件，并不会从服务器下载。
  • HTTP 1.0中，采用Last-Modified(response header)和If-Modified-Since(request header)来指定资源过期时间；
  • HTTP 1.1中，采用E-Tag(response/request header)和If-None-Match来决定该资源是否过期；

       如何配置浏览器缓存，大多是后台资源服务器控制的。一般将共有图片，第三方JS插件库或者CSS放到CDN上，不仅仅因为CDN的分布式特性可以加快资源文件下载速度，而且，一般CDN服务器都做了缓存配置，可以充分浏览器缓存。