如何优化前端性能（一）：减少请求数量

【合并】

如果不进行文件合并，有如下3个隐患

1、文件与文件之间有插入的上行请求，增加了N-1个网络延迟

2、受丢包问题影响更严重

3、经过代理服务器时可能会被断开

但是，文件合并本身也有自己的问题

1、首屏渲染问题

2、缓存失效问题

所以，对于文件合并，有如下改进建议

1、公共库合并

2、不同页面单独合并

【图片处理】

1、雪碧图

CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图片、SVG图片的流行，该技术渐渐退出了历史舞台

2、Base64

将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33%

3、使用字体图标来代替图片

【减少重定向】

尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验

如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302临时重定向。因为，如果使用302，则每一次访问http，都会被重定向到https的页面。而永久重定向，在第1次从http重定向到https之后 ，每次访问http，会直接返回https的页面

【使用缓存】

使用cach-control或expires这类强缓存时，缓存不过期的情况下，不向服务器发送请求。强缓存过期时，会使用last-modified或etag这类协商缓存，向服务器发送请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源；如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200响应

【不使用CSS @import】

CSS的@import会造成额外的请求

【避免使用空的src和href】

a标签设置空的href，会重定向到当前的页面地址

form设置空的method，会提交表单到当前的页面地址