HTTP/1.1, HTTP/2 和 HTTP/2 Server Push 的网页加载速度对比

本文会演示 HTTP/1.1, HTTP/2 和 HTTP/2 Server Push 三种情况下网页的加载速度。

测试用的代码储存在 GitHub - lawrenceching/jetty-http2-example

我试着模拟一个简单的内容展示类网站

1. 用户访问网站首页 https://localhost:8443
2. 网站首页打开后开始加载文章内容。 JavaScript 代码访问 /api/posts/:id 加载内容。每次 API 请求需要5秒钟的完成时间，来模拟网络状况不好或者响应内容太大的情况。

HTTP/1.1

在 HTTP/1.1 的情况下，浏览器会限制并发的 TCP 请求。例如 Chrome 下的最大并发连接数为6。因而，如果你的网页太大，需要加载的资源太多，资源请求就不得不排队来等待可用的 TCP 连接。

下面的瀑布图清楚地展示了这种情况。

首先，Chrome 花了5秒钟加载网站首页。
然后，网站开始请求服务器加载文章内容。 你可以很明显地发现，Chrome 一次只能加载6篇文章。瀑布图中所有API请求分成了3批，下一批的请求必须等待上一批的请求完成。 这种限制极大地增加了网页的加载时间。

本例中，浏览器一共花了20秒（首页+3批API请求）加载网页。

HTTP/2

HTTP/2 最大的改进是 TCP 连接的复用。 切换到 HTTP/2 后，HTTP/1.1 中3批的 API 请求可以一并发出。总用时从20秒降低到10秒（5秒首页+5秒API请求）

HTTP/2 Server Push

HTTP/2 的 Server Push 机制允许服务器端推送资源到客户端而不用等待浏览器请求。 本例中，在加载首页的5秒里，服务器把15篇文章的内容推送到客户端。进而把网站加载时间从10秒降低到5秒。

瀑布图中可以看出，除了加载首页的5秒，后续的 API 请求几乎不耗时间。浏览器收到服务端的推送后，会缓存起来。 当后续的 API 请求发出后，浏览器先检查缓存，如果缓存有对应的请求响应，就直接返回缓存的内容。