HTTP/2：更快的页面加载时间

时间 2019-12-28

标签 http 更快页面加载时间栏目 HTTP/TCP 繁體版

原文原文链接

做者：Alex Ronin
翻译：疯狂的技术宅css

原文：https://frontnet.eu/http-2-fa...html

未经容许严禁转载前端

也许人们已经据说过 HTTP2，有不少数大公司都使用HTTP2，如Google、Youtube、Facebook ......nginx

那么什么是HTTP2？咱们如今就知道了。程序员

HTTP 的历史

HTTP 又称超文本传输协议，就是你的浏览器与你正在访问的网站的 Web 服务器通讯的方式。golang

两台（或多台）计算机经过 Internet 相互通讯的方式有不少种，HTTP 只是用于 Web 浏览的一种方式。面试

第一个官方 HTTP 版本（HTTP 1.0）于1996年做为RFC 1945发布。 segmentfault

随着 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。再见。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...