HTTP2更快的页面加载时间

jiezi

5 年前

作者：Alex Ronin

翻译：疯狂的技术宅

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

未经允许严禁转载

也许人们已经听说过 HTTP2，有很多数大公司都使用 HTTP2，如 Google、Youtube、Facebook ……

那么什么是 HTTP2？我们现在就知道了。

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 协议的下一个正式版本，用于在浏览 Web 时提高页面加载速度和性能。

事实上，你是否更要新到 HTTP/2 并不重要，“一切都还行”。当前的浏览器仍然使用 HTTP / 1.1，如果服务器支持 HTTP/2，那就用 HTTP/2。

一般来说，如果你使用 Web，就应该关心。

在用户方面，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 插件。

与 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 个方案及实现

更多文章 …

HTTP2更快的页面加载时间

HTTP 的历史

HTTP/2 是什么?

为什么不更新到 HTTP/2？

那么为什么要关心？

HTTP/2 特性

多路复用

优先反馈（优先排序）

服务器推送

二进制数据传输

头压缩（header compression）

举例

结论

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

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

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