http1.1 vs http2.0 速度对比实测

首先对比一下http1.1 vs http2.0 区别：

1. 连接管理：

HTTP/1.1:
- 每个请求/响应都需要一个独立的 TCP 连接，虽然可以使用持久连接（keep-alive）来复用连接，但仍然存在请求队头阻塞（Head-of-Line Blocking）的问题。
HTTP/2.0:
- 允许多个请求和响应在同一个连接上并行传输，使用流（streams）来区分不同的请求，避免了队头阻塞问题。

2. 数据格式:

HTTP/1.1:
- 使用文本格式进行数据传输，所有的头部信息都是明文的，解析效率较低。
HTTP/2.0:
- 使用二进制格式进行数据传输，效率更高，减少了数据传输的开销。

3. 头部压缩:

HTTP/1.1:
- 头部信息未经过压缩，导致在大量请求时，头部数据可能占用较大带宽。
HTTP/2.0:
- 采用 HPACK 头部压缩算法，减少了头部数据的大小，提高了传输效率。

4. 优先级和流控制:

HTTP/1.1:
- 不支持请求优先级，所有请求都按顺序处理。
HTTP/2.0:
- 支持请求优先级和流控制，可以根据需求调整请求的处理顺序，提高资源利用率。

代码实测：

项目地址: https://github.com/jackywq/http1.1vshttp2.0

首先clone一下项目，然后在nginx上配置http1.1 和 http2.0两个server，在nginx.conf配置如下代码：

server {
        # https
        listen 441 ssl; 
        server_name  127.0.0.1;

        # 各自电脑的ssl证书地址可能不一样，自己调整下
        ssl_certificate /usr/local/etc/nginx/ssl-cert.pem;
        ssl_certificate_key /usr/local/etc/nginx/ssl-key.pem;

        add_header Cache-Control no-store;

        location / {
            # 各自电脑的静态html地址不一样，自己调整下
            root   /Users/wangquan/http-hello/http1-vs-http2/static; 
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    server {
        # https
        listen 442 ssl; 
        http2 on;
        server_name  127.0.0.1;

        ssl_certificate /usr/local/etc/nginx/ssl-cert.pem;
        ssl_certificate_key /usr/local/etc/nginx/ssl-key.pem;

        add_header Cache-Control no-store;

        location / {
            root   /Users/wangquan/http-hello/http1-vs-http2/static; 
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

使用nginx -t 测试下，测试成功后执行 nginx -s reload;

使用浏览器分别打开 https://127.0.0.1:441/ 和 https://127.0.0.1:442/；

以下在无延迟和网络延迟100ms的网络环境下，分别测试http1.1和http2.0页面渲染总耗时；

无延迟：http1.1和http2.0渲染时长差别不大