[性能优化]http2协议简介及如何开启http2

众所周知,在前端性能优化篇里有一条优化建议:使用雪碧图合并图片资源、合并js请求数,那么为什么会有这么一条优化建议?这是因为在采用http1.1协议下有如下缺点:

1、TCP 连接数限制

对于同一个域名,浏览器最多只能同时创建 6~8 个 TCP 连接 (不同浏览器不一样)。

在HTTP1.1的环境下,在图中可以看到每新建了六个 TCP 连接,每次新建连接 DNS 解析需要时间(几 ms 到几百 ms 不等)、TCP 慢启动也需要时间、TLS 握手又要时间,而且后续请求都要等待队列调度

2、线头阻塞问题

每个 TCP 连接同时只能处理一个请求 - 响应,浏览器按 FIFO 原则处理请求,如果上一个响应没返回,后续请求 - 响应都会受阻。

3、Header 内容多,而且每次请求 Header 不会变化太多,没有相应的压缩传输优化方案

4、为了尽可能减少请求数,需要做合并文件、雪碧图、资源内联等优化工作,但是这无疑造成了单个请求内容变大延迟变高的问题,且内嵌的资源不能有效地使用缓存机制

5、明文传输不安全

那么如何解决这些问题?http2登场:

HTTP2 的优势:

  • 二进制分帧:

    在二进制分帧层上,HTTP 2.0 会将所有传输的信息分割为更小的消息和帧,并对它们采用二进制格式的编码 ,其中HTTP1.x的首部信息会被封装到Headers帧,而我们的request body则封装到Data帧里面。

    img

  • 多路复用

    代替原来的序列和阻塞机制。HTTP2只需要通过一次TCP连接将并发请求全部发出,而HTTP1.1则每并发一次请求就需要建立一次TCP连接,当前浏览器为了控制资源,会对单个域名有 6-8个的TCP链接请求限制,如果遇到某一个资源加载耗时较久,就会拖累整个站点的加载速度。

  • 头部压缩:

    HTTP 2在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键-值对。通过对称加密的方式客户端和服务端之前的通信只需用一个更短的‘’暗号“来匹配之间的需要通信的内容,如果首部发生变化了,那么只需要发送变化了数据在Headers帧里面,新增或修改的首部帧会被追加到“首部表”,首部表在 HTTP 2的连接存续期内始终存在,由客户端和服务器共同渐进地更新 。将大大节省消息头占用的网络的流量

  • 服务器推送:

    HTTP1.1的方式,客户端浏览器解析到哪里需要什么资源再加载什么资源,在HTTP2中,服务端可以主动推送,结合业务场景,服务端可以先把关键的首要的资源首先推送给客户端。只需要一次HTTP请求,浏览器就得到了首要资源,页面性能大大提升。

如何使用HTTP2 :

​ 由于目前主流浏览器,chrome、火狐等都已经公开宣布只支持加密的HTTP2,所以HTTP2基本都是基于HTTPS协议的,HTTP升级成HTTPS需要SSL证书,可以到阿里云免费申请,这边以自己的博客nginx配置作为参考

注:升级openssl1.1.x+、 Nginx 1.9.5

server {
    #这里配置https和http2协议
    listen 443 ssl http2;
    server_name blog.reviosky.com;
    ssl on;
    root /data/blog/admin/dist/;
    try_files $uri /index.html;
    #下面配置ssl证书路径
    ssl_certificate /etc/nginx/conf.d/cert/7218208_blog.reviosky.com.pem;  
    ssl_certificate_key /etc/nginx/conf.d/cert/7218208_blog.reviosky.com.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;   
    location / {
        root /data/blog/admin/dist/;
        try_files $uri /index.html;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT,DELETE;
        #用于强制取消浏览器缓存
        if ($uri ~* "html$") {
                add_header 'Cache-Control' 'no-cache';
            }
    }

    location /api/ {
        proxy_pass http://127.0.0.1:7001/admin/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

server {
    listen       80;
    server_name  blog.reviosky.com;
    rewrite ^(.*)$ https://$host$1 permanent; #把http的域名请求转成https
    charset      utf-8;
    autoindex off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT,DELETE;

    if ($request_method = OPTIONS ) { 
        return 200; 
    }


    location / {
        root /data/blog/admin/dist/;
        try_files $uri /index.html;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT,DELETE;
        #用于强制取消浏览器缓存
        if ($uri ~* "html$") {
                add_header 'Cache-Control' 'no-cache';
            }
    }

    location /api/ {
        proxy_pass http://127.0.0.1:7001/admin/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

HTTP1.1升级HTTP2后前后对比:

使用前

QQ图片20220211104011

使用后

QQ图片20220211104419

可以看到tcp连接数由多个转变成一个,加载完所有图片的速度得到了提升

文章归类于: 运维

文章标签: #nginx

版权声明: 自由转载-署名-非商用

3条评论

提示:

评论会在审核通过后显示在下方

昵称必填,用于展示在评论中

邮箱必填,不会公开展示,方便及时收到回复

网址选填,方便看到的人去访问,请完整填写,例如(https://blog.reviosky.com)

item.from_unamezq

666

回复
item.from_uname21312

123

回复
item.from_uname聆风

😜

回复
  • 1