sufuwang
commented
1 year ago 减少 TCP 链接 & 减小队头阻塞时间
本地开启两个 Server ，逻辑如下所示
function fn(res) {
if (req.url === "/") {
res.end(readFileSync(__dirname + "/../src/index.html", "utf8"));
return;
}
res.end("ok");
}
index.html 的逻辑如下所示
const handle = async () => await fetch('a')
Promise.all([...new Array(500)].map(() => handle()))HTTP1.1 的 Network 如下图所示
HTTP2 的 Network 如下图所示
HTTP2 的 Stalled 和 Finish 时间、Connect 数都是小于 HTTP1.1 的，但是 HTTP2 并未真正解决队头阻塞的问题，在 HTTP2 中还是需要等待上一个请求完成再去执行下一个请求，在 TCP 协议下无法真正解决队头阻塞，即 TCP 数据包的顺序响应。有很多文章中说 HTTP2 解决了队头阻塞问题，这里的队头阻塞指的是 HTTP 应用曾协议层面的问题，即 HTTP1.1 必须顺序响应，前一个请求的延迟将同步体现到后续所有请求上，而 HTTP2 则使用分帧做到了乱序响应。下面来对比一下顺序响应带来的影响
本地开启两个 Server ，逻辑如下所示
function fn(res) {
if (req.url === "/") {
res.end(readFileSync(__dirname + "/../src/index.html", "utf8"));
return;
}
if (req.url === "/delay") {
setTimeout(() => {
res.end("ok");
}, 50);
return;
}
res.end("ok");
}
index.html 的逻辑如下所示
const handle = async () => await fetch('a')
const delay = async () => await fetch('delay')
Promise.all([...new Array(500)].map((d, i) => i === 200 ? delay() : handle()))HTTP1.1 的 Network 如下图所示
HTTP2 的 Network 如下图所示
对比可得，HTTP1.1 一个出现网络波动的请求，会对后续的所有请求造成影响，这并不是绝对的，当耗时超出阈值时，HTTP1.1 会新开一个 TCP 链接，如下图所示，图片已经按照 connect id 排序
结论
多路复用可以 解决 “多个 TCP 链接” 问题，二进制分帧可以 减缓 “队头阻塞” 问题，解决的是 HTTP 应用层协议的 “队头阻塞”，并没有解决 TCP 传输层协议的 “队头阻塞”
背景
HTTP1.1 存在以下问题
针对以上问题，HTTP2 协议 RFC-7540 诞生并发布于 2015 年，做了以下事情来解决这些问题
Chrome 较早是支持 Server Push 的，但出于一些原因，Chrome 不再支持 Server Push，所以现在学习一下前三种方法
eg: HTTP1.1 & HTTP2 性能对比