作者:Alex Ronin翻译:疯狂的技术宅
原文:https://frontnet.eu/http-2-fa...
未经允许严禁转载
也许人们已经听说过 HTTP2,有很多数大公司都使用HTTP2,如Google、Youtube、Facebook ......
那么什么是HTTP2?我们现在就知道了。
HTTP 的历史
HTTP 又称超文本传输协议,就是你的浏览器与你正在访问的网站的 Web 服务器通信的方式。
两台(或多台)计算机通过 Internet 相互通信的方式有很多种,HTTP 只是用于 Web 浏览的一种方式。
第一个官方 HTTP 版本(HTTP 1.0)于1996年作为RFC1945发布。
随着 Web 的快速发展,有了更多的 css,js 组件,这意味着我们需要更多资源,在某些情况下还需要同时下载多个资源。在使用时会发生什么
1 connection / 1 resources
HTTP 1.0 的机制无法实现带宽优化。
在 1999 年发布的版本 HTTP/1.1 解决了流水线概念这个问题。然后 HTTP/1.1 版本继续更新并使用到现在为止。
虽然有所改进,但是流水线并没有完全解决 HTTP/1.0 的问题。虽然人们觉得“还不错!”,Google 的人们觉得“不行!”,所以他们发布了一个名为 SPDY 的新协议来改善页面加载时间。 。 SPDY 通过压缩,多路复用和优先级排序技术实现了减少页面加载时间的目标。 2012年7月,SPDY 开发团队公开宣布它正朝着标准化方向发展。 Chromium、Mozilla Firefox、Opera、Amazon Silk、Internet Explorer 和 Safari 浏览器也实现了 SPDY。
部署 SPDY 后,与 HTTP/1.x 相比,它显示出显著的改进,并引起了 Firefox 和 nginx 等开发人员的兴趣。不久之后开发人员开始讨论 HTTP/2。在调用过程和提案选择完成之后,SPDY/2 作为 HTTP/2 的基础。从那时起,根据工作组的讨论和实施者的反馈,发生了一些变化。截至2015年5月,HTTP/2 规范发布(RFC 7540)。
HTTP/2 是什么?
HTTP/2 是 HTTP 协议的下一个正式版本,用于在浏览 Web 时提高页面加载速度和性能。
为什么不更新到 HTTP/2?
事实上,你是否更要新到 HTTP/2 并不重要,“一切都还行”。当前的浏览器仍然使用 HTTP / 1.1,如果服务器支持HTTP/2,那就用 HTTP/2。
那么为什么要关心?
一般来说,如果你使用Web,就应该关心。
在用户方面,HTTP/2 有助于充分利用带宽并提供更好的浏览体验。如果你去一个不支持 HTTP/2 的网站,他们就是在浪费你的时间,浪费并不好!
在开发方面,HTTP/2 提供了更好的可用性体验,更快的页面加载时间有助于提高搜索引擎的排名。
HTTP/2 特性
虽然我们知道这些事,也可以像往常一样使用 HTTP/2,但知道一点点比闭上眼睛更好。
如上所述,HTTP/2 的目标是提高页面加载速度,我们将学习一些有助于 HTTP/2 实现此目标的特性。
多路复用
首先我们需要提到多路复用,它解决了 HTTP/1中存在的队首阻塞问题。为了更容易理解这个问题,想象一下我们就像去餐馆一样访问网站。进入餐厅时,例如我们要订购 10 件商品,看看每个版本的餐厅是如何为我们服务的:
- HTTP/1:每服务员只收到 1 个订单并提供正确的商品,然后就不再处理任何商品。所以如果有 10 个商品,我们将不得不给 10 名服务人打电话。餐厅只需要雇佣劳动力,但需要花时间打电话给疲惫的人订购足够的食物。
- HTTP/1.1:服务员经过改进能够收到更多的订单,但 1 次只收到 1 个订单。为了更快地订购,你可以根据你的需要打给 2-3 名服务人员。总的来说这是相当不错的,但还不是最优的。这些人被称为持久连接。
- HTTP/2:如果餐厅改进了新的技术,员工仍然会记下所有订单,然后开始提货。但是这些人会更灵活,提出来的那些货物会交替发送每个部分。因此,减少了大量的等待时间,只需要 1 个人就可以服务 1 桌,降低了人员的成本。
优先反馈(优先排序)
在HTTP/1.1中,服务器必须以相同的查询顺序发送响应。 HTTP/2 能够异步解析,因此可以更快地处理更小或更快的查询。此外允许浏览器优先下载哪些资源对于网站的显示很重要。
例如,页面 <head>
中的 <script>
标签将以高优先级(低于CSS - 最高)加载到 Chrome中,但如果它具有异步属性,则该优先级将更改为“低”(它可以异步加载和运行)。
此外,我们还可以用关键字更改资源的优先级:
- rel=preload/prefetch/preconnect
- as=fonts/style/script...
服务器推送
HTTP/2 允许服务器在请求之前发送数据包。例如你可以“引用”页面底部的脚本。在 HTTP/1.1 中,浏览器将加载并解析 HTML,然后在脚本标记时运行 JavaScript。使用HTTP/2,服务器可以在浏览器请求此资源之前发送 JavaScript 文件。这减少了浏览器分析 HTML 并发送请求时的等待时间。
二进制数据传输
HTTP/2 以二进制形式传输数据。二进制协议对于解析更有效、更紧凑,最重要的是,它们比 HTTP/1.x 等文本协议更不容易出错。因为二进制协议不必处理像空格、大写、行尾、空行等情况......
例如,HTTP/1.1 定义了分析消息的四种方式,而在 HTTP/2 中只是一行代码
需要注意的是 HTTP/2 不能通过 telnet 使用,但有一些分析支持工具,例如 Wireshark 插件。
头压缩(header compression)
与 HTTP/1.1 不同,数据包的标头在发送之前将被压缩。与查询一起发送的信息描述了它的数据、来源、类型、长度等。
举例
对于具有高延迟或响应太大的服务器,我们将很容易地看到HTTP / 2和HTTP / 1之间的页面加载时间差异。你可以查看以下两个示例:
- HTTP/1.1: http://http2.golang.org/gophe...
- HTTP/2: https://http2.golang.org/goph...
结论
这篇文章有点冗长,但目的只是介绍 HTTP/2。下一篇文章,我们将尝试为服务器安装 HTTP/2。再见。
本文首发微信公众号:前端先锋
欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章:
- 深入理解Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13个帮你提高开发效率的现代CSS框架
- 快速上手BootstrapVue
- JavaScript引擎是如何工作的?从调用栈到Promise你需要知道的一切
- WebSocket实战:在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么?
- 30分钟用Node.js构建一个API服务器
- Javascript的对象拷贝
- 程序员30岁前月薪达不到30K,该何去何从
- 14个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把HTML转成PDF的4个方案及实现
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。