Roger Leung‘s Epcot

vuePress-theme-reco Roger Leung ( z3rog )    2018 - 2021
Roger Leung‘s Epcot

Choose mode

  • dark
  • auto
  • light
Blog
Note
Github (opens new window)
author-avatar

Roger Leung ( z3rog )

18

Article

20

Tag

Blog
Note
Github (opens new window)
  • 首页
  • 框架与工具链

    • Vue 3
    • Vue 2
    • Webpack 4
  • 前端性能优化

    • 性能优化的必要性
    • 性能指标
    • 基本手段
    • 离线缓存
  • 浏览器机制

    • 架构
    • 导航
    • 渲染机制
    • 缓存机制
  • 网络协议

    • TCP 协议
    • HTTP 协议
    • HTTPS 协议
    • HTTP 2 协议
    • HTTP 3 协议
  • 其他

    • V8 中的快慢属性与快慢数组
    • V8 解析执行 JavaScript 流程简述
    • V8 的垃圾回收机制
    • 100 行代码写一个破产版 Vite
    • 浅谈微前端

HTTP 2 协议

vuePress-theme-reco Roger Leung ( z3rog )    2018 - 2021

HTTP 2 协议

Roger Leung ( z3rog ) 2019-01-28 HTTP 2Protocal

HTTP 2 协议基础个人总结

HTTP 方法、状态代码、URI 和标头字段等核心概念一如往常。不过,HTTP 2 修改了数据格式化(分帧)以及在客户端与服务器间传输的方式。

# HTTP 2 的特点

  • 使用二进制格式传输,更高效、紧凑
  • 对报头(Headers)进行压缩
  • 引入分帧层,对传输方式进行优化
  • 多路复用,一个连接实现并行请求
  • 服务器主动推送,无需不必要的客户端主动请求

# 头压缩

http2-header-compression 在 HTTP/1.x 中,HTTP 请求与响应中都会包含头信息,始终以纯文本形式存在,通常会给每个传输增加 500–800 字节的开销。如果使用 HTTP Cookie,增加的开销有时会达到上千字节。HTTP 2 使用了 HPACK 压缩格式进行压缩,运用到哈夫曼编码,文字描述见Google Developers (opens new window)

# 分帧层

HTTP 2 的分帧层是所有性能增强的核心,它定义了如何封装HTTP 消息并在客户端、服务端之间传输。在 1.x 版本中,协议以换行符作为纯文本的分隔符,这里有一定的安全隐患,黑客可能会使用精心构造的数据来攻击客户端。

https-binary-framing

# 多路复用

在 1.x 版本中,如果客户端想要发起多个并行请求以提升性能,则必须使用多个 TCP 连接。这种模型也会导致队首阻塞,从而造成 TCP 连接的效率低下。

而在 HTTP 2 中,消息被分解为独立的帧,交错发送,然后在另一端重新组装,直接带来的收益是:

  • 多个请求、响应可以并行交错,并且请求与请求、响应与响应之间互不影响
  • 使用同一个 TCP 连接并行发送多个请求、响应
  • 极大地提高网络容量利用率、消除不必要延迟,减少页面加载时间

http2-multiplexing

打开 Chrome 的 Devtools Network 面板,将 Protocal 、Connection ID 打开并刷新页面,可以观察到基于 h2(HTTP 2)协议的多个接口的 Connection ID 是相同的,即表明 HTTP 2 可以使用同一个 TCP 连接并发处理请求、响应。

# 服务端推送

HTTP 2 打破了严格的请求、响应顺序,支持一对多和服务器发起推送的工作流,如果服务器已经知道客户端下一步要请求什么资源,服务端推送即可派上用场。推送的资源可以进行:

  • 客户端缓存
  • 不同页面之间重用(区别与 WebSocket)
  • 与其他资源一起复用
  • 由服务端设定优先级
  • 客户端可拒绝推送

# HTTP 2 伪头

HTTP 2 增加了几种伪头,以区别于 HTTP 1.x。见图

# HTTP 2 连接过程

  • 客户端由浏览器发起 HTTP 1.1 的请求
  • 服务端返回信息进行协商升级(保证客户端支持 HTTP 2)
  • 客户端请求信息携带确认升级信息
  • 服务端返回 HTTP 2 响应