IMLC.ME

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 请求发出后,浏览器先检查缓存,如果缓存有对应的请求响应,就直接返回缓存的内容。

Powered by Next.js and Antd | 粤ICP备15018861号