将 Nginx 配置支持 HTTP2.0,这是为了等以后有钱可以买个服务器的时候直接配置服务器体验一把网页秒开的快感,为啥配置HTTP2.0可以秒开网页?请静心往下看:
HTTP 2.0 带来了哪些新特性 ?HTTP 2.0 带来了很多新的特性,这里不会一一详细介绍,只列举了几项,如有兴趣研究的童鞋请移步 官方RFC文档。
1.增加二进制分帧
HTTP协议从0.9版本开始不断增加新的功能特性,但长远来看都是 向前兼容 的,HTTP 2.0 在 应用层 跟 传输层 之间增加了一个 二进制分帧层,从而能够达到 “在不改动HTTP的语义、HTTP方法、状态码、URI及首部字段的情况下,突破HTTP 1.1的性能限制,改进传输性能,实现低延迟和高吞吐量。”
如上图所示,在 二进制分帧层 上, HTTP 2.0 会将所有传输的信息分割为更小的消息和帧,并对它们采用二进制格式的编码,其中 HTTP 1.1 的首部信息会被封装到 Headers 帧,而 request body 被封装到 Data 帧里面。
2.压缩头部
如下图所示:HTTP 2.0 在 客户端 和 服务端 使用 首部表 来跟踪和存储之间发送的 键-值 对,对相同请求而言不需要再次发送请求和相应发送,通信期间几乎不会改变的通用 键-值 (如:用户代理、可接受的媒体类型)只需发送一次。
如果请求不包含首部(如:对同一资源的轮询请求),那首部开销为零字节
如果首部发生变化,那只需发送变化的数据在 Headers 帧里面,新增或修改的 首部帧 会被追加到 首部表
3.多路复用
记得大学 计算机网络 跟 计算机组成原理 这两门课都讲到了 多路复用 这个概念,当时一知半解(可能是老师讲得太抽象了o(╯□╰)o)。相比一个入了门的前端开发在谈到 性能优化 的方法时都可以轻轻松松列举如下几点:
CSS雪碧图合并 - 减少请求
合并压缩CSS跟JavaScript代码 - 减少请求
CSS代码放在header头部里面,JavaScript代码放到body结束之前 - 因为JavaScript代码执行会阻塞
然后我们可以自豪地晒出下面的代码片段:
<!DOCTYPE HTML><html>
<head>
<link rel="stylesheet" href="xxx.cdn.com/??a.css,b.css" />
</head>
<body>
...
<script src="xxx.cdn.com/??a.js,b.js"></script>
</body>
</html>
但 HTTP 2.0 的 多路复用 让我们回到了最原始最自然的写码状态,先看下图:
对 HTTP 1.1 而言,浏览器通常有链接的限制,即使开启多个链接,也需要付出相应的代码,而 多路复用 允许同时通过单一的 HTTP 2.0 连接发起多重的 请求-相应 消息。
这意味着 HTTP 2.0 的通信都在一个连接上完成了,这个连接可以承载任意数量的 双向数据流 ,直观来说,就是我们又可以开开心心写出下面代码:
<!DOCTYPE HTML><html>
<head>
<link rel="stylesheet" href="a.css" />
<link rel="stylesheet" href="b.css" />
</head>
<body>
...
<script src="a.js"></script>
<script src="b.js"></script>
</body>
</html>
4.请求优先级
既然所有资源都可以并行交错发送,会不会导致下面这种情况呢?