HTTP 2.0 初体验

背景

从 HTTP 2.0 发布至今，已经愈来愈多的网站开始部署 HTTP/2 了，正好最近一直在研究前端性能优化，就决定在我的网站先尝尝鲜。

HTTP/2 概述

官网先来一波HTTP/2 官网，HTTP 2.0 的出现，相比于 HTTP 1.x ，作出了不少优化调整，大幅提高了前端 web 性能，减小网络延迟等等。 HTTP/2: the Future of the Internet | Akamai这是 Akamai 公司创建的一个官方的演示，用以说明 HTTP/2 相比于以前的 HTTP/1.1 在性能上的大幅度提高。 同时请求 379 张图片，从 Load time 的对比能够看出 HTTP/2 在速度上的优点。 关于 HTTP/2 百度内容不少，下面我列出比较好的 HTTP/2 内容的地址，你们能够去这些地址查看。

1. HTTP/2.0 相比 1.0 有哪些重大改进？ 来自知乎
2. HTTP/2 资料汇总 推荐，从协议自己，到部署优化，再到工具调试和参开书籍等都包含了。
3. HTTP,HTTP2.0,SPDY,HTTPS 看这篇就够了
4. HTTP、HTTP2.0、SPDY、HTTPS 你应该知道的一些事

下面内容 来自上面连接第四个，能够直接去查看原文，也能够在本文查看。

web 始祖 HTTP

全称：超文本传输协议(HyperText Transfer Protocol) 伴随着计算机网络和浏览器的诞生，HTTP1.0 也随之而来，处于计算机网络中的应用层，HTTP 是创建在 TCP 协议之上，因此 HTTP 协议的瓶颈及其优化技巧都是基于 TCP 协议自己的特性，例如 tcp 创建链接的 3 次握手和断开链接的 4 次挥手以及每次创建链接带来的 RTT 延迟时间。

HTTP 与现代化浏览器

早在 HTTP 创建之初，主要就是为了将超文本标记语言(HTML)文档从 Web 服务器传送到客户端的浏览器。也是说对于前端来讲，咱们所写的 HTML 页面将要放在咱们的 web 服务器上，用户端经过浏览器访问 url 地址来获取网页的显示内容，可是到了 WEB2.0 以来，咱们的页面变得复杂，不只仅单纯的是一些简单的文字和图片，同时咱们的 HTML 页面有了 CSS，Javascript，来丰富咱们的页面展现，当 ajax 的出现，咱们又多了一种向服务器端获取数据的方法，这些其实都是基于 HTTP 协议的。一样到了移动互联网时代，咱们页面能够跑在手机端浏览器里面，可是和 PC 相比，手机端的网络状况更加复杂，这使得咱们开始了不起不对 HTTP 进行深刻理解并不断优化过程当中。

HTTP 的基本优化

影响一个 HTTP 网络请求的因素主要有两个：带宽和延迟。

• 带宽：若是说咱们还停留在拨号上网的阶段，带宽可能会成为一个比较严重影响请求的问题，可是如今网络基础建设已经使得带宽获得极大的提高，咱们再也不会担忧由带宽而影响网速，那么就只剩下延迟了。
• 延迟：
  1. **浏览器阻塞（HOL blocking）：**浏览器会由于一些缘由阻塞请求。浏览器对于同一个域名，同时只能有 4 个链接（这个根据浏览器内核不一样可能会有所差别），超过浏览器最大链接数限制，后续请求就会被阻塞。
  2. **DNS 查询（DNS Lookup）：**浏览器须要知道目标服务器的 IP 才能创建链接。将域名解析为 IP 的这个系统就是 DNS。这个一般能够利用 DNS 缓存结果来达到减小这个时间的目的。
  3. **创建链接（Initial connection）：**HTTP 是基于 TCP 协议的，浏览器最快也要在第三次握手时才能捎带 HTTP 请求报文，达到真正的创建链接，可是这些链接没法复用会致使每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显，慢启动则对文件类大请求影响较大。

HTTP1.0 和 HTTP1.1 的一些区别

HTTP1.0 最先在网页中使用是在 1996 年，那个时候只是使用一些较为简单的网页上和网络请求上，而 HTTP1.1 则在 1999 年才开始普遍应用于如今的各大浏览器网络请求中，同时 HTTP1.1 也是当前使用最为普遍的 HTTP 协议。 主要区别主要体如今：

1. **缓存处理：**在 HTTP1.0 中主要使用 header 里的 If-Modified-Since,Expires 来作为缓存判断的标准，HTTP1.1 则引入了更多的缓存控制策略例如 Entity tag，If-Unmodified-Since, If-Match, If-None-Match 等更多可供选择的缓存头来控制缓存策略。
2. **带宽优化及网络链接的使用：**HTTP1.0 中，存在一些浪费带宽的现象，例如客户端只是须要某个对象的一部分，而服务器却将整个对象送过来了，而且不支持断点续传功能，HTTP1.1 则在请求头引入了 range 头域，它容许只请求资源的某个部分，即返回码是 206（Partial Content），这样就方便了开发者自由的选择以便于充分利用带宽和链接。
3. **错误通知的管理：**在 HTTP1.1 中新增了 24 个错误状态响应码，如 409（Conflict）表示请求的资源与资源的当前状态发生冲突；410（Gone）表示服务器上的某个资源被永久性的删除。
4. **Host 头处理：**在 HTTP1.0 中认为每台服务器都绑定一个惟一的 IP 地址，所以，请求消息中的 URL 并无传递主机名（hostname）。但随着虚拟主机技术的发展，在一台物理服务器上能够存在多个虚拟主机（Multi-homed Web Servers），而且它们共享一个 IP 地址。HTTP1.1 的请求消息和响应消息都应支持 Host 头域，且请求消息中若是没有 Host 头域会报告一个错误（400 Bad Request）。
5. **长链接：**HTTP 1.1 支持长链接（PersistentConnection）和请求的流水线（Pipelining）处理，在一个 TCP 链接上能够传送多个 HTTP 请求和响应，减小了创建和关闭链接的消耗和延迟，在 HTTP1.1 中默认开启 Connection： keep-alive，必定程度上弥补了 HTTP1.0 每次请求都要建立链接的缺点。如下是常见的 HTTP1.0：

区别用一张图来体现：

HTTP1.0 和 1.1 现存的一些问题

1. 上面提到过的，HTTP1.x 在传输数据时，每次都须要从新创建链接，无疑增长了大量的延迟时间，特别是在移动端更为突出。
2. HTTP1.x 在传输数据时，全部传输的内容都是明文，客户端和服务器端都没法验证对方的身份，这在必定程度上没法保证数据的安全性。
3. HTTP1.x 在使用时，header 里携带的内容过大，在必定程度上增长了传输的成本，而且每次请求 header 基本不怎么变化，尤为在移动端增长用户流量。
4. 虽然 HTTP1.x 支持了 keep-alive，来弥补屡次建立链接产生的延迟，可是 keep-alive 使用多了一样会给服务端带来大量的性能压力，而且对于单个文件被不断请求的服务(例如图片存放网站)，keep-alive 可能会极大的影响性能，由于它在文件被请求以后还保持了没必要要的链接很长时间。

HTTPS 应声而出

为了解决以上问题，网景在 1994 年建立了 HTTPS，并应用在网景导航者浏览器中。 最初，HTTPS 是与 SSL 一块儿使用的；在 SSL 逐渐演变到 TLS 时（其实两个是一个东西，只是名字不一样而已），最新的 HTTPS 也由在 2000 年五月公布的 RFC 2818 正式肯定下来。简单来讲，HTTPS 就是安全版的 HTTP，而且因为当今时代对安全性要求更高，chrome 和 firefox 都大力支持网站使用 HTTPS，苹果也在 ios 10 系统中强制 app 使用 HTTPS 来传输数据，因而可知 HTTPS 势在必行。

HTTPS 与 HTT

1. HTTPS 协议须要到 CA 申请证书，通常免费证书不多，须要交费。
2. HTTP 协议运行在 TCP 之上，全部传输的内容都是明文，HTTPS 运行在 SSL/TLS 之上，SSL/TLS 运行在 TCP 之上，全部传输的内容都通过加密的。
3. HTTP 和 HTTPS 使用的是彻底不一样的链接方式，用的端口也不同，前者是 80，后者是 443。
4. HTTPS 能够有效的防止运营商劫持，解决了防劫持的一个大问题。

HTTPS 改造

若是一个网站要全站由 HTTP 替换成 HTTPS，可能须要关注如下几点：

1. 安装 CA 证书，通常的证书都是须要收费的，这边推荐一个比较好的购买证书网站：1）Let's Encrypt，免费，快捷，支持多域名（不是通配符），三条命令即时签署+导出证书。缺点是暂时只有三个月有效期，到期需续签。2Comodo PositiveSSL，收费，可是比较稳定。
2. 在购买证书以后，在证书提供的网站上配置本身的域名，将证书下载下来以后，配置本身的 web 服务器，同时进行代码改造。
3. HTTPS 下降用户访问速度。SSL 握手，HTTPS 对速度会有必定程度的下降，可是只要通过合理优化和部署，HTTPS 对速度的影响彻底能够接受。在不少场景下，HTTPS 速度彻底不逊于 HTTP，若是使用 SPDY，HTTPS 的速度甚至还要比 HTTP 快。
4. 相对于 HTTPS 下降访问速度，其实更须要关心的是服务器端的 CPU 压力，HTTPS 中大量的密钥算法计算，会消耗大量的 CPU 资源，只有足够的优化，HTTPS 的机器成本才不会明显增长。

推荐一则淘宝网改造 HTTPS的文章。

使用 SPDY 加快你的网站速度

2012 年 google 如一声惊雷提出了 SPDY 的方案，你们才开始从正面看待和解决老版本 HTTP 协议自己的问题，SPDY 能够说是综合了 HTTPS 和 HTTP 二者有点于一体的传输协议，主要解决：

1. **下降延迟：**针对 HTTP 高延迟的问题，SPDY 优雅的采起了多路复用（multiplexing）。多路复用经过多个请求 stream 共享一个 tcp 链接的方式，解决了 HOL blocking 的问题，下降了延迟同时提升了带宽的利用率。
2. **请求优先级（request prioritization）：**多路复用带来一个新的问题是，在链接共享的基础之上有可能会致使关键请求被阻塞。SPDY 容许给每一个 request 设置优先级，这样重要的请求就会优先获得响应。好比浏览器加载首页，首页的 html 内容应该优先展现，以后才是各类静态资源文件，脚本文件等加载，这样能够保证用户能第一时间看到网页内容。
3. **header 压缩：**前面提到 HTTP1.x 的 header 不少时候都是重复多余的。选择合适的压缩算法能够减少包的大小和数量。
4. **服务端推送（server push）：**采用了 SPDY 的网页，例如个人网页有一个 sytle.css 的请求，在客户端收到 sytle.css 数据的同时，服务端会将 sytle.js 的文件推送给客户端，当客户端再次尝试获取 sytle.js 时就能够直接从缓存中获取到，不用再发请求了。

HTTP2.0 的前世此生

顾名思义有了 HTTP1.x，那么 HTTP2.0 也就瓜熟蒂落的出现了。HTTP2.0 能够说是 SPDY 的升级版（其实本来也是基于 SPDY 设计的），可是，HTTP2.0 跟 SPDY 仍有不一样的地方，主要是如下两点：

1. HTTP2.0 支持明文 HTTP 传输，而 SPDY 强制使用 HTTPS
2. HTTP2.0 消息头的压缩算法采用 HPACK，而非 SPDY 采用的 DEFLATE

HTTP2.0 的新特性

• **新的二进制格式（Binary Format）：**HTTP1.x 的解析是基于文本。基于文本协议的格式解析存在自然缺陷，文本的表现形式有多样性，要作到健壮性考虑的场景必然不少，二进制则不一样，只认 0 和 1 的组合。基于这种考虑 HTTP2.0 的协议解析决定采用二进制格式，实现方便且健壮。
• **多路复用（MultiPlexing）：**即链接共享，即每个 request 都是是用做链接共享机制的。一个 request 对应一个 id，这样一个链接上能够有多个 request，每一个链接的 request 能够随机的混杂在一块儿，接收方能够根据 request 的 id 将 request 再归属到各自不一样的服务端请求里面。

• **header 压缩：**如上文中所言，对前面提到过 HTTP1.x 的 header 带有大量信息，并且每次都要重复发送，HTTP2.0 使用 encoder 来减小须要传输的 header 大小，通信双方各自 cache 一份 header fields 表，既避免了重复 header 的传输，又减少了须要传输的大小。
• **服务端推送（server push）：**同 SPDY 同样，HTTP2.0 也具备 server push 功能。目前，有大多数网站已经启用 HTTP2.0，例如 YouTuBe，淘宝网等网站，利用 chrome 控制台能够查看是否启用 H2：

更多关于 HTTP2 的问题能够参考：HTTP2 奇妙平常，以及 HTTP/2 官网。

HTTP2.0 的升级改造

对比 HTTPS 的升级改造，HTTP2.0 或许会稍微简单一些，你可能须要关注如下问题：

1. 前文说了 HTTP2.0 其实能够支持非 HTTPS 的，可是如今主流的浏览器像 chrome，firefox 表示仍是只支持基于 TLS 部署的 HTTP2.0 协议，因此要想升级成 HTTP2.0 仍是先升级 HTTPS 为好。
2. 当你的网站已经升级 HTTPS 以后，那么升级 HTTP2.0 就简单不少，若是你使用 NGINX，只要在配置文件中启动相应的协议就能够了，能够参考 NGINX 白皮书，NGINX 配置 HTTP2.0 官方指南。
3. 使用了 HTTP2.0 那么，本来的 HTTP1.x 怎么办，这个问题其实不用担忧，HTTP2.0 彻底兼容 HTTP1.x 的语义，对于不支持 HTTP2.0 的浏览器，NGINX 会自动向下兼容的。

后记

• 以上就是关于 HTTP,HTTP2.0,SPDY,HTTPS 的一些基本理论，有些内容没有深刻讲解，你们能够跟进参考链接具体查看。
• 关于 HTTP1.x 的一些优化方式，例如文件合并压缩，资源 cdn，js，css 优化等等一样使用与 HTTP2.0 和 HTTPS，因此 web 前端的优化，仍是要继续进行。
• 其实 WEB 发展如此迅速的今天，有些技术是真的要与时俱进的，就像苹果宣布 ios 10 必须使用 HTTPS 开始，关于 web 协议革新就已经开始了，为了更好的性能，更优越的方式，如今就开始升级改造吧

HTTP/2 搭建

正如上面后记所说，开始改造吧！我改造的网站是个人我的网站。

• **下载 SSL 证书：**个人域名是在阿里云购买的，登入阿里云后台进入域名基本信息查看，就能看到免费开启 SSL 证书，若是你有钱能够选择第一个，做为穷逼一枚，固然是选择免费的证书啦。

  

  按照操做一步一步走，而后，而后你就获得一个免费的 SSL 证书啦。

• **配置 HTTPS 和 HTTP2：**下面就开始配置 NGINX 了，先附上一篇 NGINX https帮组文档。
  • 将下载的 SSL 放在服务器的目录中，能够根据我的习惯放入目录，得方便找到
  • 配置 nginx，进行 nginx 配置和重定向以后，进行 nginx 重启（nginx -s reload）,下面就是见证奇迹的时刻了。须要注意的一点，若是出现警告，请把 SSL on 这行注释掉就 OK 了。

• **验证 HTTPS 和 HTTP2：**nginx 重启以后，应该 ok 了，可是应该如何去验证呢，下面有两个方法

  1. 在控制台输入 window.chrome.loadTimes() 查看信息
  2. 安装 chrome 插件HTTP/2 and SPDY indicator进行查看。

总结

至此 HTTP/2 的学习和搭建就完成，前端还有不少的优化内容要学习和去时间，优化不息，学习不止，感谢阅读！

本文地址：HTTP 2.0 初体验，更多信息能够访问个人我的网站，说不定有您想看的