HTTP2：如何提升网络速度|浏览器篇

上一篇文章我们聊了 HTTP/1.1 的发展史，虽然 HTTP/1.1 已经做了大量的优化，但是依然存在很多性能瓶颈，依然不能满足我们日益变化的新需求，所以就有了我们今天要聊的 HTTP/2。

本文我们依然从需求的层面来谈，先分析 HTTP/1.1 存在哪些问题，然后再来分析 HTTP/2 是如何解决这些问题的。

我们知道 HTTP/1.1 为网络效率做了大量的优化，最核心的有如下三种方式：

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

通过这些方式就大大提高了页面的下载速度，你可以通过下图来直观感受下：

在该图中，引入了 CDN，并同时为每个域名维护 6 个连接，这样就大大减轻了整个资源的下载时间。这里我们可以简单计算下：如果使用单个 TCP 的持久连接，下载 100 个资源所花费的时间为 100 * n * RTT；若通过上面的技术，就可以把整个时间缩短为 100 * n * RTT/(6 * CDN 个数)。从这个计算结果来看，我们的页面加载速度变快了不少

原理拆解： HTTP/1.1 的持久连接减少重复握手，但同一连接上的响应通常仍需按次序完成；浏览器于是为同一域名建立多条连接，并通过不同域名或 CDN 增加并发通道。收益取决于请求数量、资源耗时和连接上限，并不能简单等同于带宽按连接数倍增：多条连接仍会共享出口带宽，还会分别经历连接建立与慢启动。

最小验证： 输入是 12 个各延迟 100ms 的本地请求，分别把客户端并发上限设为 1 和 6，验证扩大连接并发能缩短总等待时间。将代码保存为 h1.js，使用 Node.js 18+ 执行 node h1.js。

const http = require('node:http');
const { performance } = require('node:perf_hooks');

const server = http.createServer((req, res) => {
  setTimeout(() => res.end('ok'), 100);
});

server.listen(0, '127.0.0.1', async () => {
  const { port } = server.address();

  async function run(maxSockets) {
    const agent = new http.Agent({ keepAlive: true, maxSockets });
    const start = performance.now();
    const jobs = Array.from({ length: 12 }, (_, i) =>
      new Promise((resolve, reject) => {
        http.get({ host: '127.0.0.1', port, path: `/${i}`, agent }, res => {
          res.resume();
          res.on('end', resolve);
        }).on('error', reject);
      })
    );
    await Promise.all(jobs);
    agent.destroy();
    return Math.round(performance.now() - start);
  }

  console.log('1 connection:', await run(1), 'ms');
  console.log('6 connections:', await run(6), 'ms');
  server.close();
});

maxSockets 控制同一源的并发连接数；典型输出约为 1200ms 和 200ms，说明并发可覆盖服务器等待时间。该本地实验没有模拟公网握手、拥塞控制和带宽竞争，因此不能证明连接越多越快。

边界与排查： 可在浏览器开发者工具的 Network 面板查看 Protocol、Connection ID、排队时间和瀑布图；若大量时间落在 Queueing，增加并发可能有效，若主要耗时来自大文件传输或服务端处理，域名分片收益有限。使用 HTTP/2 或连接合并时，域名数量也不再等价于实际连接数量。