从拥堵到畅通：HTTP/2 如何解决 Web 性能瓶颈？

HTTP/2 相比 HTTP/1.1 引入了许多改进，旨在提高 Web 传输性能和用户体验。HTTP/1.1 存在的问题主要包括高延迟、头部阻塞、连接复用效率低等问题。HTTP/2 通过一系列的技术提升，解决了这些问题。我们来详细讲解从 HTTP/1.1 到 HTTP/2 的主要改进。

一、HTTP/1.1 的主要问题

1. 队头阻塞（Head-of-line Blocking）：
   • HTTP/1.1 中，所有请求都是串行处理的，即使浏览器可以并发发起多个请求，但每个连接只能处理一个请求。这意味着在同一个 TCP 连接中，一个请求没有完成时，后续请求必须等待。

想象你在一个高速公路收费站，每条车道只能一次通过一辆车。HTTP/1.1 就像这条高速公路，如果前面一辆车卡住了，后面的车都得等着。这就导致了队头阻塞，延迟了整个队伍的进展。

2. 请求/响应头部开销大：
   • HTTP/1.1 每次请求都会重复发送完整的请求头和响应头，即使同一个会话中多次请求的头部信息没有变化。这带来了不必要的网络传输开销。

每次你在同一个餐厅点餐时都要重新告诉服务员你是谁、坐在哪里，以及你不喜欢的配料。HTTP/1.1 的头部开销就像这种重复的信息传递，浪费了时间和资源。

3. 连接复用问题：
   • HTTP/1.1 中，浏览器为了并发请求资源，通常会为每个域名打开多个 TCP 连接，但 TCP 连接数有上限，连接过多会导致资源的争抢和延迟。

你在一家餐馆吃饭，这家餐馆的服务员数量有限，服务员就像 TCP 连接。当你需要点很多道菜（资源）时，餐馆为了尽快满足你的需求，会分配多个服务员来服务你。但由于服务员数量有限，其他顾客也在等着点餐，服务员来回奔波反而降低了效率。这就像 HTTP/1.1 中，浏览器需要频繁创建和管理多个连接，反而导致了资源争夺和延迟。

4. 无优先级控制：
   • 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 的性能提升，开发者可以通过以下几种方法来进行量化分析：

1. Web 性能测试工具：

   • 使用工具如 WebPageTest、Google Lighthouse、GTmetrix 等，进行 HTTP/1.1 和 HTTP/2 的对比测试。这些工具可以提供详细的页面加载时间、首屏时间、资源加载时间等性能指标。

2. 浏览器开发者工具：

   • 浏览器的开发者工具（如 Chrome DevTools）可以在 Network 标签页中查看 HTTP 请求的时长、连接数、数据大小和握手时间，方便对比 HTTP/1.1 和 HTTP/2 的性能。

3. 性能监控平台：

   • 通过集成性能监控工具（如 New Relic、Datadog、Pingdom）监测线上应用的真实用户性能数据，观察 HTTP/2 部署前后页面加载时间的变化。

4. 真实用户测试（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/2 的升级主要解决了 HTTP/1.1 中的性能瓶颈问题，包括队头阻塞、头部冗余、连接复用等问题。通过二进制分帧、多路复用、头部压缩、服务器推送和请求优先级控制，HTTP/2 实现了更高效的资源传输，提升了 Web 页面加载速度和整体用户体验。