浏览器原理 29 # HTTP/2:如何提升网络速度?

简介: 浏览器原理 29 # HTTP/2:如何提升网络速度?

说明

浏览器工作原理与实践专栏学习笔记



HTTP/1.1 网络优化策略


最核心的有如下三种方式:


  1. 增加了持久连接;
  2. 浏览器为每个域名最多同时维护 6 个 TCP 持久连接;
  3. 使用 CDN 的实现域名分片机制。


HTTP/1.1 的资源下载方式:

20210601095542291.png

在该图中,引入了 CDN,并同时为每个域名维护 6 个连接,这样就大大减轻了整个资源的下载时间。



HTTP/1.1 的主要问题


HTTP/1.1 的一个核心问题:HTTP/1.1对带宽的利用率却并不理想。


比如常说的 100M 带宽,实际的下载速度能达到 12.5M/S,而采用 HTTP/1.1 时,也许在加载页面资源时最大只能使用到 2.5M/S,很难将 12.5M 全部用满。


这里解释一下12.5M/S 怎么来的?


带宽是指每秒最大能发送或者接收的字节数。

  • 每秒能发送的最大字节数称为上行带宽
  • 每秒能够接收的最大字节数称为下行带宽


看一下几个单位:


   带宽的统计单位是:比特/秒(bps):10M = 10Mbps;

   网速是数据传输的速度,单位是:字节/秒(B/s KB/s MB/s):1MB/s=1024KB/s ;1KB/s=1024B/s

   比特是信息的最小单位:1字节=8比特(1B=8bit或者1B=8b);1字节/秒=8比特/秒(1B/s=8bps)



所谓 100M 带宽,其实是指 100Mbps (兆比特每秒),亦即 100 x 1024 / 8 = 12800KB/s = 12.5 MB/s


但这只是理论上的速度,实际上则要再扣约 12% 的信息头标识等各种控制讯号。


接下来看看导致利用率不理想的原因?


第一个原因:TCP 的慢启动

一旦一个 TCP 连接建立之后,就进入了发送数据状态,刚开始 TCP 协议会采用一个非常慢的速度去发送数据,然后慢慢加快发送数据的速度,直到发送数据的速度达到一个理想状态,这个过程称为慢启动


慢启动是 TCP 为了减少网络拥塞的一种策略。

但是慢启动会导致一个性能问题:就是关键资源的加载耗时增大,导致首次渲染流程时间变长。


第二个原因:TCP 连接会竞争固定的带宽

假如系统同时建立了多条 TCP 连接,当带宽充足时,每条连接发送或者接收速度会慢慢向上增加;而一旦带宽不足时,这些 TCP 连接又会减慢发送或者接收的速度。


因为多条 TCP 连接之间又不能协商让哪些关键资源优先下载,这样就有可能影响那些关键资源的下载速度。

第三个原因:HTTP/1.1 队头阻塞的问题

在 HTTP/1.1 中使用持久连接时,虽然能公用一个 TCP 管道,但是在一个管道中同一时刻只能处理一个请求,在当前的请求没有结束之前,其他的请求只能处于阻塞状态。


那么该如何去解决这些问题呢?



HTTP/2 的多路复用

怎么规避 TCP 的慢启动和 TCP 连接之间的竞争问题?


HTTP/2 的思路就是一个域名只使用一个 TCP 长连接来传输数据,这样整个页面资源的下载过程只需要一次慢启动,同时也避免了多个 TCP 连接竞争带宽所带来的问题。


怎么解决队头阻塞的问题?


HTTP/2 需要实现资源的并行请求,也就是任何时候都可以将请求发送给服务器,而并不需要等待其他请求的完成,然后服务器也可以随时返回处理好的请求资源给浏览器。


HTTP/2 的解决方案可以总结为:一个域名只使用一个 TCP 长连接和消除队头阻塞问题。



多路复用机制

下面该图就是:HTTP/2 最核心、最重要且最具颠覆性的多路复用机制


2021060111132284.png

图中每个请求都有一个对应的 ID,如

  • stream1 表示 index.html 的请求
  • stream2 表示 foo.css 的请求


这样在浏览器端,就可以随时将请求发送给服务器了。而服务器端接收到这些请求后,会根据自己的喜好来决定优先返回哪些内容。


   比如服务器可能早就缓存好了 index.html 和 bar.js 的响应头信息,那么当接收到请求的时候就可以立即把 index.html 和 bar.js 的响应头信息返回给浏览器,然后再将 index.html 和 bar.js 的响应体数据返回给浏览器。


可以随意发送的原因:每份数据都有对应的 ID,浏览器接收到之后,会筛选出相同 ID 的内容,将其拼接为完整的 HTTP 响应数据。


HTTP/2 使用了多路复用技术,可以将请求分成一帧一帧的数据去传输,收到优先级高的请求也可以优先处理关键资源的请求。



多路复用的实现

HTTP/2通过引入二进制分帧层,实现了 HTTP 的多路复用技术。


HTTP/2 协议栈

20210601192713516.png


请求和接收过程:


   浏览器准备好请求数据,包括了请求行、请求头等信息,如果是 POST 方法,那么还要有请求体。

   这些数据经过二进制分帧层处理之后,会被转换为一个个带有请求 ID 编号的帧,通过协议栈将这些帧发送给服务器。

   服务器接收到所有帧之后,会将所有相同 ID 的帧合并为一条完整的请求信息。

   然后服务器处理该条请求,并将处理的响应行、响应头和响应体分别发送至二进制分帧层。

   二进制分帧层会将这些响应数据转换为一个个带有请求 ID 编号的帧,经过协议栈发送给浏览器。

   浏览器接收到响应帧之后,会根据 ID 编号将帧的数据提交给对应的请求。


TCP连接建立:


20210602144335636.png


TLS握手和HTTP 2.0通信过程:


image.png


二进制分帧层

参考资料:


HTTP 2.0并没有改变HTTP 1.x的语义,只是在应用层使用二进制分帧方式传输。


20210602111030709.png


帧(frame)

最小的通信单位,承载特定类型的数据,包括帧首部、流标识符、优先值和帧净荷等。


20210602111351268.png



在二进制分帧的结构中,头部有8个字节(64Bit),其中有一个字节(8Bit)来标志帧的类型:

HTTP2.0规定了如下帧类型:

DATA: 用于传输HTTP消息体
HEADERS:用户传输关于流的额外的首部字段
PRIORITY: 用户指定或者重新指定引用资源的优先级
RST_STRING: 用于通知流的非正常终止
SETTINGS:用于通知两端通信方式的数据配置
PUSH_PROMISE: 用于发出创建流和服务器引用资源的要约
PING: 用于计算往返时间,执行“活性”检查
GOAWAY: 用于通知对端停止在当前连接的创建流
WINDOW_UPDATE: 用于针对个别流或个别连接实现流量控制
CONTINUATION: 用于继续一系列首部块片段


比如:


   客户端通过发送 HEADERS 帧来创建新流,这个帧包含带有新流ID的公用首部、可选的31位优先级,以及一组HTTP键-值对首部。


   服务器通过发送 PUSH_PROMISE 帧来发起推送流,这个帧与 HEADERS 帧等效,但它包含“要约流ID”,没有优先级。


   创建新流并发送HTTP首部之后,接下来就是利用 DATA 帧发送应用数据。应用数据可以分成多个 DATA 帧,最后一帧要翻转首部的 END_STREAM 字段。


标志位用于不同的帧类型定义特定的消息标志。


比如:DATA帧就可以使用 End Stream: true 表示该条消息通信完毕。流标识位表示帧所属的流ID。优先值用于 HEADERS 帧,表示请求优先级。R表示保留位。


下面是 Wireshark 抓包的一个DATA帧:

20210602112136179.png



消息(message)

   消息是指逻辑上的HTTP消息(请求/响应)。一系列数据帧组成了一个完整的消息。比如一系列DATA帧和一个HEADERS帧组成了请求消息。


流(stream)

   流是连接中的一个虚拟信道,可以承载双向消息传输。每个流有唯一整数标识符。为了防止两端流ID冲突,客户端发起的流具有奇数ID,服务器端发起的流具有偶数ID。所有HTTP 2. 0 通信都在一个TCP连接上完成, 这个连接可以承载任意数量的双向数据流Stream。 相应地, 每个数据流以 消息的形式发送, 而消息由一 或多个帧组成, 这些帧可以乱序发送, 然后根据每个帧首部的流标识符重新组装。



20210602114802713.png



HTTP/2 其他特性


1. 可以设置请求优先级


HTTP消息分解为多个独立帧之后,这些帧可以交错和传输顺序,进一步提升性能。


为了做到这一点,每个流都可以带上31个比特位的优先级标示服务器通过这些优先级的标志来分配资源(CPU、内存、带宽),而在响应数据准备好之后,优先将最高优先级的帧发送给客户端。


不过HTTP2.0没有规定优先级的具体算法,那么这种策略就需要开发着自行来解决。



2. 服务器推送


HTTP 2.0增加了服务端推送功能,服务端可以根据客户端的请求,提前返回多个响应,推送额外的资源给客户端。


如下图所示,客户端请求stream 1,/page.html。服务端在返回 stream 1 消息的同时推送了 stream 2(/script.js) 和 stream 4(/style.css)。


20210602143318168.png


这样当浏览器解析完 HTML 文件之后,就能直接拿到需要的 CSS 文件和 JavaScript 文件,这对首次打开页面的速度起到了至关重要的作用。


3. 头部压缩(首部压缩)


HTTP 1.x每一次通信(请求/响应)都会携带首部信息用于描述资源属性。


HTTP 2.0在客户端和服务端之间使用“首部表”来跟踪和存储之前发送的键-值对。首部表在连接过程中始终存在,新增的键-值对会更新到表尾,因此,不需要每次通信都需要再携带首部。

20210602143832434.png


HTTP 2.0使用了首部压缩技术,压缩算法使用 HPACK。可让报头更紧凑,更快速传输,有利于移动网络环境。


注意:HTTP 2.0关注的是首部压缩,而我们常用的gzip等是报文内容(body)的压缩。二者不仅不冲突,且能够一起达到更好的压缩效果。









相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
6天前
|
安全 网络协议 网络安全
OWASP Top 10 网络安全10大漏洞——A01,源码+原理+手写框架
OWASP Top 10 网络安全10大漏洞——A01,源码+原理+手写框架
|
6天前
|
Web App开发 移动开发 JavaScript
探索浏览器内核:理解网络世界的幕后英雄
探索浏览器内核:理解网络世界的幕后英雄
|
6天前
|
缓存 安全 前端开发
探索HTTP协议:网络通信的基石
探索HTTP协议:网络通信的基石
|
8天前
状态码对于理解HTTP请求和响应的流程,以及调试网络问题非常重要
【5月更文挑战第15天】HTTP状态码由三位数字表示,分为1xx-5xx五类。1xx为信息响应,2xx表示成功,如200(请求成功)、201(创建成功)。3xx是重定向,如301(永久移动)、302(临时重定向)。4xx表示客户端错误,如400(坏请求)、404(未找到)。5xx是服务器错误,包括500(内部服务器错误)和503(服务不可用)。这些状态码用于理解请求响应流程和调试网络问题。
15 1
|
23小时前
Edge浏览器控制台(F12)中网络不显示接口信息
Edge浏览器控制台(F12)中网络不显示接口信息
|
2天前
|
算法 安全 网络协议
https原理--RSA密钥协商算法
https原理--RSA密钥协商算法
7 0
|
7天前
|
前端开发 JavaScript API
如何在不同浏览器中创建和使用 XMLHttpRequest 对象来执行 HTTP 请求
如何在不同浏览器中创建和使用 XMLHttpRequest 对象来执行 HTTP 请求
9 2
|
8天前
|
机器学习/深度学习 存储 算法
卷积神经网络(CNN)的数学原理解析
卷积神经网络(CNN)的数学原理解析
37 1
卷积神经网络(CNN)的数学原理解析
|
8天前
|
开发框架 网络协议 Java
【计算机网络】—— 网络应用通信基本原理
【计算机网络】—— 网络应用通信基本原理
13 0
|
8天前
|
移动开发 网络协议 网络安全
【网络安全 | 网络协议】一文讲清HTTP协议
【网络安全 | 网络协议】一文讲清HTTP协议
25 0