提前锁票 InfoQ 最具价值感的视频栏目 | InfoQ 大咖说 了解详情
写点什么

HTTP/2 推送之难,远超想象

2017 年 6 月 11 日

在讨论页面加载性能问题时,我经常听到有人说“HTTP/2 推送可以解决这问题”,但我对这个技术的了解不多,于是打算深入研究一下。

HTTP/2 推送远比我最初想象中更复杂,也更底层,但最让我措手不及的地方在于,这种技术在不同浏览器上的表现竟然有这么大的差别,本来我还觉得这技术已经足够成熟,可以在生产环境中使用了。

本文并不是那种认为“HTTP/2 推送一无是处”的吐槽文。我觉得 HTTP/2 推送真的很强大,以后还会更加完善,但并不算能解决所有问题的万灵药。

完整的 Fetch 路径

在页面和目标服务器间,横亘着一系列可能拦截请求的缓存和其他机制:

当人们希望尝试或向别人解释 Git 或其他看得见的东西时,通常会使用类似上面这样的流程示意图,在本来就懂的人看来,这样的示意图一目了然,但不懂的人往往会一头雾水。如果你也有这种感觉,那要先说声抱歉了!希望下文能帮你更好地理解。

HTTP/2 推送的工作原理

  • 页面:嘿 example.com,能把你的首页让我看一看吗?
  • 服务器:没问题!哦,在我给你发送首页的同时,还需要发送一些样式表、图片、JavaScript,以及一些 JSON。
  • 页面:额,好的。
  • 页面:我已经看到 HTML 了,但貌似还需要一个样式……哦,好像你已经发过来了,酷!

服务器响应请求时,可以顺便包含额外的资源。例如包含一系列请求报头,这样稍后浏览器就知道如何匹配不同报头。这些额外的资源位于缓存中,当浏览器请求的资源与缓存中的匹配时即可直接从缓存中获取。

这种方法可以改善性能,原因在于可以提前发送可能需要的资源,而不需要等待浏览器索取,因此可以提高页面加载速度。

多年来我对 HTTP/2 推送的了解仅限于此,听起来挺简单,但魔鬼往往隐藏在细节中……

任何东西都可以使用推送缓存

HTTP/2 推送是一种底层网络功能,用到网络栈的任何东西都可以使用该功能。但只有确保一致性以及可预测性,才能发挥最大作用。

我试着推送一些资源,并通过下列方式收集:

  • fetch()
  • XMLHttpRequest
2017 年 6 月 11 日 17:163552
用户头像

发布了 283 篇内容, 共 85.3 次阅读, 收获喜欢 35 次。

关注

评论

发布
暂无评论
发现更多内容

第二周作业-APP的利益相关方

Geek_ce1551

产品经理训练营第二周作业:利益相关方分析

苏格图德

产品经理训练营

第二周笔记

Ashley.

产品训练营作业-week02

anyou

第二周作业-stack holder

Ashley.

产品经理训练营-第四节课笔记

Geek_娴子

成功逆袭:外包—苏宁—阿里 论我是怎么快速晋升的?

比伯

Java 编程 架构 面试 程序人生

产品利益相关方

高和不在家

02-抽奖小助手与「谁」相关

sting

产品

第二周

Jove

产品思维与产品意识学习总结

苏格图德

产品经理训练营

利益相关者分析

未月二九

第二章作业-产品的利益相关方

产品经理训练营 - 第二周作业

玖玖

如何对应用进行Android系统签名和常用adb命令总结

Changing Lin

android

极客产品训练营第二课作业

HaoJi

第二周 作业

Geek_72d5ab

主机安全产品利益相关方

赵志广

产品经理训练营

利益相关方分析

李钊悌

Stakeholder list

顾远山

第二周作业 - 抽奖助手利益相关者

Geek_971380

理解利益相关者(Stake holder)

Geek_a32093

【纯CSS】画 多国国旗

学习委员

css3 html/css CSS小技巧 28天写作 纯CSS

第二章学习总结

Kasn

产品经理 产品经理训练营

产品的利益相关方

沈弋

抽奖小程序-利益相关方分析

思亭

第二章作业

Kasn

产品经理 产品经理训练营

产品经理训练营--第二周作业

孤星

产品经理第二周作业

克比

Week2:抽奖助手StakeHolder思考

Y.

极客大学产品经理训练营

「产品经理训练营」作业 02

🌟

产品经理训练营 极客大学产品经理训练营 产品训练营

打造 VUCA 时代的 10 倍速 IT 团队

打造 VUCA 时代的 10 倍速 IT 团队

HTTP/2推送之难,远超想象-InfoQ