您当前的位置:首页 > 电脑百科 > 网络技术 > 网络知识

HTTP2.0中的Server Push

时间:2019-09-05 10:51:05  来源:  作者:

前言

引入任何一种新技术都是有原因和目的的。比如 HTTP keep-alive 允许客户端和服务端用同一个 TCP 连接发送/接收多个请求/响应,减少了昂贵的 TCP 建立连接和断开连接的过程;HTTP pipelining 允许客户端在收到响应之前继续发送幂等方法(GET 和 HEAD)的请求,提升在高延迟连接下页面的加载速度;HTTP/2 更是定义了帧(frame)和流(stream),真正地复用了 TCP 连接,从而解决了 pipelining 不能解决的问题(例如「快」的响应被「慢」的响应阻塞的问题)。

Server push 的意义很简单,说白了就是为了提前推送响应。这里面包含两个问题——推什么和怎么推。

推什么?

使用 HTTP/1.x 协议时,由于连接不能完全被复用,许多站点为了减少连接数和请求数,会把样式表和脚本内联到 html 中。如果不考虑缓存,可以认为这是提前推送了样式表和脚本的响应。许多介绍 server push 的文章也以推送这些静态资源为例。

简单聊聊HTTP2.0中的Server Push

 

上图是我画的一张示意图。可以看到,使用 server push 后,两个静态资源文件随着 HTML 一同被推了回来。主要省去了两部分时间:一部分是接收和解析 HTML 的时间(不一定是接收和解析完整 HTML 的时间,浏览器很可能一发现引用了静态资源文件,就发起请求);另一部分是请求静态资源文件的时间。

但是,我个人认为现阶段用 server push 推送静态资源并不是一件有意义的事情,原因在于:

  1. HTML 文件通常不大,而且样式表一般很靠前,浏览器发现这类静态资源的时间几乎可以忽略不计;
  2. HTTP/2 已经能够复用 TCP 连接了,请求不再像以前那样昂贵,请求的实际数据很小,发送请求的时间也几乎可以忽略不计;
  3. 国内的 CDN 普遍不支持 server push,这意味着,如果要推送静态资源,就必须耗费自己服务器的带宽,同时也享受不到 CDN 的各种好处了;
  4. 静态资源通常会被缓存很长时间,提前推送的话,在大多数情况下反而会浪费流量。

因此,我们推送的资源并不是静态资源,而是 API

  1. 相比较静态资源文件,浏览器更难发现 API 请求,必须等到接收和解析完 JS 文件,执行到相关语句,浏览器才会发送请求;
  2. API 一般不缓存,即便缓存,缓存的时间也比静态资源短得多。

当然,server push 对要推送的资源是有限制的:其请求必须是可缓存的、安全的,而且不能带有请求体。换句话说,server push 可以推 GET 和 HEAD 请求的响应。

怎么推?

Server push 的原理很简单,本质上就是先替你请求再告诉你。

假设服务端接收到客户端对 HTML 文件的请求,决定用 server push 推送一个样式表文件。那么,服务端会构造一个请求,包括请求方法和请求头,填充到一个 PUSH_PROMISE 帧里发送给客户端,来告知客户端它已经代劳发了这个请求。客户端可以根据 PUSH_PROMISE 帧里提供的 Promised Stream Id 来读推过去的响应。

简单聊聊HTTP2.0中的Server Push

 

当客户端收到这个 PUSH_PROMISE 帧的时候,它就知道服务端将要推送一个样式表文件回来。如果此时客户端需要请求这个样式表文件,即便服务端还没推完,它也不会往服务端发送对样式表文件的请求。

这里需要注意的是避免竞争。在上面的例子中,必须先发送 PUSH_PROMISE,再发送 HTML 的内容。这是因为 HTML 中存在对样式表文件的引用,一旦客户端发现了这个引用却还没收到 PUSH_PROMISE,它就会发起请求。这会引起 PUSH_PROMISE 和对样式表文件的请求之间的竞争,从而 server push 有一定的几率失败。

另一种竞争是不可避免的。如果客户端认为它不需要某个即将被推过来的资源(比如这个资源还在缓存的有效期内),那么它会 reset 掉相应的流。但是即便如此,服务端在收到 RST_STREAM 帧的时候,很有可能已经推了一部分数据了。这种服务端开始推送数据和 RST_STREAM 帧之间的竞争是难以避免的(这是 feature 而不是 BUG)。

Demo

为了测试 server push 的效果,我们拿饿了么 PC的餐厅列表页面做了个 demo。

在开启 server push 之前,timeline 如下:

简单聊聊HTTP2.0中的Server Push

 

使用 server push 推送页面请求的 API 之后,timeline 变成了这样:

简单聊聊HTTP2.0中的Server Push

 

一方面,timeline 总时间变短了。两者 Loading、Scripting、Rendering 和 Painting 的时间比较接近,但是主动推送 API 后,Idle 从超过 280ms 缩短至 50ms 左右,商家图片的开始加载时间也大幅提前了(视觉上就是餐厅列表瞬间出来了)。

另一方面,页面的 DOMContentLoaded 和 Load 时间有所提升(在 Network 面板中,没有截图)。这是意料之中的,客户端在请求 HTML 之后需要同时接收 HTML 和 API 的响应。这并不影响页面与资源的总体加载时间变短。

Demo 终究只是 demo。推送 API 比推送静态资源复杂许多,具体在于大多数 API 是需要带参数的。即便只推送 GET 方法的 API,也需要带上 query string 和 header 里(包括 Cookie)的参数。

如果你好奇怎么验证 server push 有没有生效,请打开 Network 面板,你会看到一排漂亮的「Push」:

简单聊聊HTTP2.0中的Server Push

 

写在最后

Server push 还有许多有趣的地方,限于篇幅不能一一赘述。

最后我补充两点:

  1. 调试 server push 的正确姿势是用 Chrome 打开 chrome://net-internals/#http2,发了什么帧,收到什么帧,一目了然;
  2. 只要证书匹配,server push 也可以推送其他 host 的资源。


Tags:HTTP2.0   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
HTTP缓存策略http协议是什么?HTTP协议(超文本传输协议),简单来说就是一种网络传输协议, 浏览器请求服务器获取内容就是基于http协议或者https协议。 使得计算机可以在浏览器和服...【详细内容】
2020-08-06  Tags: HTTP2.0  点击:(69)  评论:(0)  加入收藏
一、HTTP2.01.1 简介HTTP/2(超文本传输协议第2版,最初命名为HTTP 2.0),简称为h2(基于TLS/1.2或以上版本的加密连接)或 h2c(非加密连接),是HTTP协议的的第二个主要版本。1.2 新的特性...【详细内容】
2020-03-31  Tags: HTTP2.0  点击:(62)  评论:(0)  加入收藏
前言引入任何一种新技术都是有原因和目的的。比如 HTTP keep-alive 允许客户端和服务端用同一个 TCP 连接发送/接收多个请求/响应,减少了昂贵的 TCP 建立连接和断开连接的过...【详细内容】
2019-12-19  Tags: HTTP2.0  点击:(111)  评论:(0)  加入收藏
前言引入任何一种新技术都是有原因和目的的。比如 HTTP keep-alive 允许客户端和服务端用同一个 TCP 连接发送/接收多个请求/响应,减少了昂贵的 TCP 建立连接和断开连接的过...【详细内容】
2019-09-05  Tags: HTTP2.0  点击:(214)  评论:(0)  加入收藏
摘要: 本文由阿里视频云高级技术专家空见撰写,主要介绍HTTP2.0的历史、特性、如何使用和使用之后的性能对比验证。背景介绍要了解HTTP2.0,先了解一下HTTP超文本传输协议的历史(H...【详细内容】
2019-06-19  Tags: HTTP2.0  点击:(388)  评论:(0)  加入收藏
▌简易百科推荐
以京训钉开发平台接口文档为例,使用HttpClient类请求调用其接口,对数据进行增删改查等操作。 文档地址: https://www.yuque.com/bjjnts/jxd/bo1oszusing System;using System.C...【详细内容】
2021-12-28  Wednes    Tags:HttpClient   点击:(1)  评论:(0)  加入收藏
阿里云与爱快路由安装组网教程一、开通好阿里云轻量服务器之后在服务器运维-远程连接处进行远程 二、进入控制台后在root权限下根据需要安装的固件位数复制下面命令。32位:wg...【详细内容】
2021-12-28  ikuai    Tags:组网   点击:(1)  评论:(0)  加入收藏
HTTP 报文是在应用程序之间发送的数据块,这些数据块将通过以文本形式的元信息开头,用于 HTTP 协议交互。请求端(客户端)的 HTTP 报文叫做请求报文,响应端(服务器端)的叫做响应...【详细内容】
2021-12-27  程序员蛋蛋    Tags:HTTP 报文   点击:(5)  评论:(0)  加入收藏
一 网络概念:1.带宽: 标识网卡的最大传输速率,单位为 b/s,比如 1Gbps,10Gbps,相当于马路多宽2.吞吐量: 单位时间内传输数据量大小单位为 b/s 或 B/s ,吞吐量/带宽,就是网络的使用率...【详细内容】
2021-12-27  码农世界    Tags:网络   点击:(3)  评论:(0)  加入收藏
1.TCP/IP 网络模型有几层?分别有什么用? TCP/IP网络模型总共有五层 1.应用层:我们能接触到的就是应用层了,手机,电脑这些这些设备都属于应用层。 2.传输层:就是为应用层提供网络...【详细内容】
2021-12-22  憨猪哥08    Tags:TCP/IP   点击:(35)  评论:(0)  加入收藏
TCP握手的时候维护的队列 半连接队列(SYN队列) 全连接队列(accepted队列)半连接队列是什么?服务器收到客户端SYN数据包后,Linux内核会把该连接存储到半连接队列中,并响应SYN+ACK报...【详细内容】
2021-12-21  DifferentJava    Tags:TCP   点击:(10)  评论:(0)  加入收藏
你好,这里是科技前哨。 随着“元宇宙”概念的爆火,下一代互联网即将到来,也成了互联网前沿热议的话题,12月9日美国众议院的听证会上,共和党议员Patrick McHenry甚至宣称,要调整现...【详细内容】
2021-12-17  王煜全    Tags:Web3   点击:(14)  评论:(0)  加入收藏
一、demopublic static void main(String[] args) throws Exception { RetryPolicy retryPolicy = new ExponentialBackoffRetry( 1000, 3);...【详细内容】
2021-12-15  程序员阿龙    Tags:Curator   点击:(22)  评论:(0)  加入收藏
一、计算机网络概述 1.1 计算机网络的分类按照网络的作用范围:广域网(WAN)、城域网(MAN)、局域网(LAN);按照网络使用者:公用网络、专用网络。1.2 计算机网络的层次结构 TCP/IP四层模...【详细内容】
2021-12-14  一口Linux    Tags:网络知识   点击:(31)  评论:(0)  加入收藏
无论是在外面还是在家里,许多人都习惯了用手机连接 WiFi 进行上网。不知道大家有没有遇到过这样一种情况, 明明已经显示成功连接 WiFi,却仍然提示“网络不可用”或“不可上网”...【详细内容】
2021-12-14  UGREEN绿联    Tags:WiFi   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条