HTTP/2与雪碧图性能对比

HTTP/1.x的缺陷

连接无法复用，需要开启多个连接
没有进行头部压缩，协议开销大
线头阻塞

HTTP/2 协议中的一些主要新特性

1. 性能提升的核心——二进制帧层

性能提升的核心在于二进制帧层.它指HTTP消息在客户端和服务端如何封装和传输.采用二进制格式传输数据而非HTTP/1.x的文本传输，二进制格式在解析和优化扩展上具有更多的优势。

2. 多路复用

在HTTP/1.1中，如果客户端为了提高性能想要在一个TCP连接内同时发起多个请求，每个请求必须按顺序被服务器依次响应，如果某一个请求特别耗时，那么后面的请求将会被一直阻塞。

而在HTTP/2中，如果在一个TCP连接内同时发起多个请求，每个消息可以被拆成互不依赖的帧并且各帧之间交错发送，然后在另一端重新把帧组装起来。这个特性就叫做多路复用。

3.头部压缩-HPACK

HTTP 1.1请求的大小变得越来越大，有时甚至会大于TCP窗口的初始大小，因为它们需要等待带着ACK的响应回来以后才能继续被发送。HTTP/2对消息头采用HPACK（专为http2头部设计的压缩格式）进行压缩传输，能够节省消息头占用的网络的流量。而HTTP/1.x每次请求，都会携带大量冗余头信息，浪费了很多带宽资源

4.Server Push

服务端可以在发送页面HTML时主动推送其它资源，而不用等到浏览器解析到相应位置，发起请求再响应。例如服务端可以主动把JS和CSS文件推送给客户端，而不需要客户端解析HTML再发送这些请求。服务端可以主动推送，客户端也有权利选择接收与否。如果服务端推送的资源已经被浏览器缓存过，浏览器可以通过发送RST_STREAM帧来拒收。主动推送也遵守同源策略，服务器不会随便推送第三方资源给客户端。

在Node.js中配置HTTP/2

使用OpenSSL生成ssl自签名证书

下载及安装OpenSSL

生成私钥

genrsa -des3 -out server.key

生成csr

req -new -key server.key -out server.csr

创建自签名证书

x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

Node.js 服务搭建

使用koa2 脚手架初始化项目

 npm install -g koa-generator

 koa2 -e HTTP2_VS_SPRITE

安装 http2 模块

 npm i http2

配置HTTP/1.1 以及 HTTP/2 server

...
var http = require('http');
var http2 = require('http2');
var fs = require('fs');

/**
* Get port from environment and store in Express.
*/

var port = '3000';
var port2 = '3001';
// app.set('port', port);
var options = {
key: fs.readFileSync(process.cwd() + '/ssl/server_no_passwd.key'),
cert: fs.readFileSync(process.cwd() + '/ssl/server.crt')
}
/**
* Create HTTP server.
*/

var server = http.createServer(app.callback());
var h2_server = http2.createSecureServer(options,app.callback())
/**
* Listen on provided port, on all network interfaces.
*/

server.listen(port);
h2_server.listen(port2);
...

图片加载对比

使用图片切割工具，把一张大小为6M的图片平均切分为255份，得到255张小图片。并在页面中通过两个端口请求这些图片

HTTP/1.1: 
    
    
    
    ...
  
HTTP/2:
    
    
    
    ...

在Chrome浏览器打开测试页面

为了使结果对比明显，使用Chrome 将拟网络环境模拟为 fast 3G

以下为测试结果：

HTTP/1.1 加载速度

http1_load.gif

HTTP/2 加载速度

http2_load.gif

可以看到，由于多路复用的加持，HTTP/2 的加载速度明显更快

在Chrome控制台导出.har文件，并使用在线分析工具：HAR Viewer

得到如下结果：

HTTP/1.1

har_h1.png

HTTP/2.0

har_h2.png

可以看到，在极端网络条件下使用HTTP/1.1, 加载时长为26.56s, 而使用HTTP/2, 加载总时长为17.26s, 快了将近40%。

雪碧图

1.原理

CSS Sprites 因其英文被称为雪碧图。
主要用于把一堆小图标整合在一张背景透明的大图上，通过设置对应的位置来显示不同的图片，目的是大幅减轻服务器对图片的请求数量，是前端性能优化的一种方式。

2.优缺点：

优点：减少网页的HTTP请求，提高页面性能，减少图片命名的困扰
缺点：需要计算每个图片的位置，且难以维护

3.生成雪碧图

将前面提到的255张切割图制作成雪碧图

在线生成雪碧图：https://www.toptal.com/developers/css/sprite-generator

将生成的css文件以及雪碧图引入到项目中。

在测试页面中修改以背景图的方式加载图片：

...

同样的方式，在浏览器打开测试页面，并将浏览器网路模拟到fast 3G

以下是测试结果

load_sprite.png

har包分析结果：

har_sprite.png

从结果可以看到，由于生成的雪碧图过大，在网络状况不是很好的条件下，加载时间来到了2分钟以上

总结

在以上对比中，由于图片过大而导致请求时间过长，而在实际应用中一般很少存在有如此之大的雪碧图，所以在请求时间上相比于HTTP/2可能没有过大的优势，但是考虑上它的维护成本，在HTTP/2时代雪碧图显然已不再被推荐，HTTP1.1时代，所有为了减少请求而做出的HACK，都已不再是HTTP/2性能优化考虑的主要点了。
目前HTTP/2兼容性：

caniuse.png

其次，由于字体图标的灵活性以及良好的兼容性，使得雪碧图更是毫无优势可言。