HTTP/2 相比 HTTP/1.1 引入了许多改进,旨在提高 Web 传输性能和用户体验。HTTP/1.1 存在的问题主要包括高延迟、头部阻塞、连接复用效率低等问题。HTTP/2 通过一系列的技术提升,解决了这些问题。我们来详细讲解从 HTTP/1.1 到 HTTP/2 的主要改进。
一、HTTP/1.1 的主要问题
- 队头阻塞(Head-of-line Blocking):
- HTTP/1.1 中,所有请求都是串行处理的,即使浏览器可以并发发起多个请求,但每个连接只能处理一个请求。这意味着在同一个 TCP 连接中,一个请求没有完成时,后续请求必须等待。
想象你在一个高速公路收费站,每条车道只能一次通过一辆车。HTTP/1.1 就像这条高速公路,如果前面一辆车卡住了,后面的车都得等着。这就导致了队头阻塞,延迟了整个队伍的进展。
- 请求/响应头部开销大:
- HTTP/1.1 每次请求都会重复发送完整的请求头和响应头,即使同一个会话中多次请求的头部信息没有变化。这带来了不必要的网络传输开销。
每次你在同一个餐厅点餐时都要重新告诉服务员你是谁、坐在哪里,以及你不喜欢的配料。HTTP/1.1 的头部开销就像这种重复的信息传递,浪费了时间和资源。
- 连接复用问题:
- HTTP/1.1 中,浏览器为了并发请求资源,通常会为每个域名打开多个 TCP 连接,但 TCP 连接数有上限,连接过多会导致资源的争抢和延迟。
你在一家餐馆吃饭,这家餐馆的服务员数量有限,服务员就像 TCP 连接。当你需要点很多道菜(资源)时,餐馆为了尽快满足你的需求,会分配多个服务员来服务你。但由于服务员数量有限,其他顾客也在等着点餐,服务员来回奔波反而降低了效率。这就像 HTTP/1.1 中,浏览器需要频繁创建和管理多个连接,反而导致了资源争夺和延迟。
- 无优先级控制:
- HTTP/1.1 中无法有效地对请求进行优先级管理,所有请求被视为等同,无法灵活控制资源加载顺序。
想象一个快递员按照顺序处理所有包裹,无论紧急程度如何。这就像 HTTP/1.1,没有优先级,所有的请求被平等对待,即使某些请求更重要。
二、HTTP/2 的核心升级
HTTP/2 是在 2015 年作为 RFC 7540 发布的协议,它通过一系列技术改进,显著提升了 HTTP 的性能。HTTP/2 的设计基于 SPDY 协议,是谷歌提出的实验性协议,其很多技术后来被 HTTP/2 采纳。
2.1 二进制分帧层(Binary Framing Layer)
HTTP/2 就像是将所有信息包装在更小、更高效的快递盒中(帧),这些盒子可以同时运送,而且无需担心它们的顺序,因为它们会在目的地重新组装。这种二进制方式比文本更易于传输和解析。
HTTP/2 最大的变革是采用了二进制协议,而 HTTP/1.1 是基于纯文本的。二进制协议更易解析和处理,使得协议更加高效且易于扩展。
- 二进制传输:HTTP/2 将所有的请求和响应都分割为更小的帧(Frame),这些帧以二进制格式传输。这与 HTTP/1.1 的纯文本协议不同,二进制协议解析速度更快。
- 帧的概念:HTTP/2 中所有的数据传输都是基于帧(Frame)进行的。HTTP/2 把 HTTP 消息分解成帧,这些帧可以乱序发送,接收方根据帧的标识符重新组装消息。
2.2 多路复用(Multiplexing)
HTTP/2 就像是高速公路的升级版,现在每条车道可以同时通过多辆车,而不再受制于前面的车。多个请求和响应可以并发处理,减少了拥堵和延迟。
多路复用 是 HTTP/2 的核心特性之一。它允许在同一个 TCP 连接中并发处理多个请求和响应,解决了 HTTP/1.1 中的队头阻塞问题。
- 多路复用解决的问题:HTTP/1.1 中,每个 TCP 连接一次只能处理一个请求。HTTP/2 则允许多个请求和响应共享同一个连接,不需要为每个请求创建单独的连接,从而减少了延迟和资源消耗。
- 帧的流(Stream):在 HTTP/2 中,每个请求对应一个流(Stream),一个流可以由多个帧组成。这些流可以并发存在,不同的请求流不会相互阻塞。
性能收益:
- 大幅减少网络延迟,尤其是在资源较多的网页中(例如多个 CSS、JavaScript 文件以及图片)。
- 用户体验上,页面内容能够同时加载,减少了等待时间,特别是在弱网环境中效果尤为显著。
测量方式:
- 网页加载时间(Page Load Time):使用浏览器开发者工具或性能监测工具(如 Lighthouse)测量页面首次加载完成时间。
- 网络请求耗时(Request Timing):通过工具如
Chrome DevTools
观察请求的延迟变化。
2.3 头部压缩(Header Compression)
在 HTTP/2 中,你只需要告诉服务员一次你不喜欢的配料,以后再点餐时服务员会自动记住,不用重复说明。HPACK 算法帮助压缩并记住头部信息,减少了冗余数据的传输。
HTTP/2 使用 HPACK 算法 对请求和响应头部进行压缩,减少了头部的冗余信息传输,从而降低了带宽占用和延迟。
- HPACK 压缩算法:HTTP/2 将头部信息进行压缩,并且在多个请求之间共享头部数据。例如,如果多个请求的头部是相同的,HTTP/2 只会在首次请求时发送完整的头部信息,后续请求只需发送差异部分或引用之前的头部数据。
- 头部复用:HTTP/2 允许复用同一个 TCP 连接下的请求头部信息,从而减少重复发送不必要的头部数据。
性能收益:
- 在带宽有限或移动网络中,头部压缩可以显著减少传输数据量,尤其是在频繁的请求中,如 REST API 通信、大量资源加载等。
- 提升网页性能,减少请求开销,特别是在多次请求同一站点的场景下。
测量方式:
- 网络带宽使用情况:使用
Chrome DevTools
的Network
标签页查看资源的实际传输大小,比较 HTTP/1.1 和 HTTP/2 下头部大小。 - 请求头大小变化:对比 HTTP/1.1 和 HTTP/2 下的每个请求头部开销,尤其是重复请求下的数据量减少情况。
2.4 请求优先级(Stream Prioritization)
HTTP/2 允许你为快递包裹设置优先级,重要的包裹会被优先送达。这让关键资源可以更快地加载,提高用户的感知体验。
HTTP/2 引入了 请求优先级 的概念,允许客户端根据请求的重要性设置优先级,从而让服务器在响应时优先处理关键资源,如页面的核心 HTML、CSS 文件等。
- 优先级控制:客户端可以为每个流分配一个优先级。浏览器可以优先请求 CSS、JS 或 HTML 文件,而将图像等资源放在次要位置,提高页面加载速度。
性能收益:
- 提升用户感知性能(感知页面加载速度),尤其是对首屏内容或关键资源的提前加载,加快页面渲染。
测量方式:
- 关键渲染路径时间:通过 Lighthouse 或 WebPageTest 测量关键 CSS 和 JS 资源加载的时间变化。
- 首屏加载时间:使用
First Contentful Paint (FCP)
来衡量首屏内容加载的改进情况。
2.5 服务器推送(Server Push)
想象你刚进家门,服务员已经把你最常点的菜摆在桌子上。HTTP/2 的服务器推送功能让服务器在你还没请求某些资源时,提前把它们发送给你,加快了页面加载速度。
HTTP/2 引入了 服务器推送 功能。服务器在接收到客户端的某个请求后,可以主动向客户端推送与请求相关的资源,而无需等待客户端单独请求这些资源。
- 服务器推送的场景:例如,当客户端请求一个 HTML 文件时,服务器可以立即推送相关的 CSS 和 JS 文件,而无需等待客户端分析完 HTML 后再请求这些资源。
- 提升加载性能:服务器推送减少了客户端请求资源的延迟,从而加快了页面加载速度。
性能收益:
- 减少了资源请求的等待时间,提升首屏加载速度。特别是在页面首次访问时,服务器推送可以提前加载关键资源,减少 RTT(Round Trip Time)。
测量方式:
- 首次渲染时间(First Contentful Paint, FCP):通过工具如 Lighthouse 测量页面首次有内容呈现到屏幕的时间。
- 首字节时间(Time to First Byte, TTFB):通过
Chrome DevTools
或其他监测工具,比较启用服务器推送后的首字节时间是否有所减少。
2.6 更安全的传输(HTTPS 优化)
虽然 HTTP/2 规范本身并不强制使用 HTTPS,但绝大多数浏览器要求在 HTTPS 下才支持 HTTP/2。这意味着使用 HTTP/2 的网站默认启用了更安全的加密传输。
- TLS 加密:HTTP/2 通过 TLS(通常是 1.2 或更高版本)进行加密,确保数据在传输过程中是安全的。
- 减少握手开销:虽然 HTTP/2 使用加密传输,但通过减少 TCP 连接数量和多路复用,可以减少 TLS 握手次数,降低性能开销。
三、性能提升的评估方式
为了评估 HTTP/1.1 到 HTTP/2 的性能提升,开发者可以通过以下几种方法来进行量化分析:
-
Web 性能测试工具:
- 使用工具如 WebPageTest、Google Lighthouse、GTmetrix 等,进行 HTTP/1.1 和 HTTP/2 的对比测试。这些工具可以提供详细的页面加载时间、首屏时间、资源加载时间等性能指标。
-
浏览器开发者工具:
- 浏览器的开发者工具(如
Chrome DevTools
)可以在Network
标签页中查看 HTTP 请求的时长、连接数、数据大小和握手时间,方便对比 HTTP/1.1 和 HTTP/2 的性能。
- 浏览器的开发者工具(如
-
性能监控平台:
- 通过集成性能监控工具(如 New Relic、Datadog、Pingdom)监测线上应用的真实用户性能数据,观察 HTTP/2 部署前后页面加载时间的变化。
-
真实用户测试(RUM):
- 通过部署 RUM(Real User Monitoring)工具,采集用户在 HTTP/1.1 和 HTTP/2 下的实际体验数据,包括页面加载时间、资源加载速度等。
四、HTTP/2 的实际效果
通过上述技术改进,HTTP/2 在以下几个方面表现更佳:
- 提高了并发性:通过多路复用技术,HTTP/2 可以在同一 TCP 连接中同时传输多个请求和响应,避免了 HTTP/1.1 中的队头阻塞问题。
- 减少了延迟:服务器推送、请求优先级以及头部压缩等技术降低了传输延迟,使得资源加载更加高效。
- 带宽占用降低:头部压缩和数据帧分割技术减少了网络传输中的冗余信息,从而降低了带宽占用。
- 性能优化:HTTP/2 在大多数情况下提供比 HTTP/1.1 更好的页面加载性能,尤其是在资源较多、请求较频繁的场景下表现尤为明显。
五、HTTP/1.1 和 HTTP/2.0 的比较总结
特性 | HTTP/1.1 | HTTP/2 |
---|---|---|
传输格式 | 纯文本 | 二进制 |
请求/响应处理 | 串行(队头阻塞) | 并行(多路复用) |
头部压缩 | 无 | 使用 HPACK 算法进行压缩 |
连接复用 | 多个 TCP 连接并发请求 | 单一 TCP 连接中的多路复用 |
请求优先级 | 无 | 有 |
服务器推送 | 无 | 有 |
安全性 | 支持 HTTP 和 HTTPS | 默认使用 HTTPS 加密 |
六、总结
HTTP/2 的升级主要解决了 HTTP/1.1 中的性能瓶颈问题,包括队头阻塞、头部冗余、连接复用等问题。通过二进制分帧、多路复用、头部压缩、服务器推送和请求优先级控制,HTTP/2 实现了更高效的资源传输,提升了 Web 页面加载速度和整体用户体验。