HTTP/2基础

HTTP/0.9 --> HTTP/1.0 --> HTTP/1.1 --> SPDY --> HTTP/2

主要新特性：

• 首部压缩
• 分帧传输
• 服务端推送

为何提出HTTP/2？

网页请求的资源愈来愈大，愈来愈多，人们对于网页加载的速度的容忍度愈来愈低，要求愈来愈高。而HTTP/1.1的协议仍是20年前的协议，当时的背景是网页请求数少，网页中资源小。所以，亟需升级协议以提升网站的性能。HTTP/2的主要任务就在于此。

1、HTTP进化史

HTTP/0.9（1989）

• 只有GET请求方法
• ×没有首部

HTTP/1.0（1996）

• +首部

• +响应码

• +重定向

• +错误

• +条件请求

• +内容编码(压缩)

• +更多的请求方法（GET POST ...）

  ......

• ×缺乏强制的Host首部

• ×不能让多个请求共用一个链接

• ×缓存的选择简陋

HTTP/1.1（1999）

• +强制客户端提供Host首部，使得虚拟主机托管成为可能（一个IP提供多个服务器）
• +Web服务器不须要在每一个响应以后关闭链接，对于提高性能来讲有重大意义
• +缓存相关首部的扩展
• +OPTIONS方法
• +Upgrade首部
• +Range请求
• +transfer-encoding
• +管道化（pipelining） ---服务器和代理经常没有实现......

SPDY（2009）

• +多路复用
• +分帧传输
• +首部压缩

HTTP/2.0（2015）

相比于HTTP/1.1

• 可感知的多数延迟可以量化的显著改善
• 解决HTTP中队头阻塞问题
• 经过提高TCP链接利用率实现并行，而非与服务器创建多个链接
• 保留HTTP/1.1的语义（包括：HTTP方法、状态码、URL、首部字段...等等）
• 明肯定义HTTP/2.0和HTTP/1.x的交互方法（双向）

2、Web性能优化动机与方式

当前性能挑战

当前web应用每一个页面可能引用数百个对象，关联数十个域名，网络环境相差迥异，设备处理能力良莠不齐。这种状况下提供表现一致且迅速的web体验不简单。保证用户在网站上交互体验的流畅性，得重视理解客户端获取页面和渲染页面步骤，从而使得在协议上作出的改进实实在在的提高web的性能。

• 更多的字节
• 更多的资源
• 更高的复杂度
• 更多的域名
• 更多的TCP socket

web页面请求

1. 资源请求/获取

   把待请求url放入队列 --> 解析url中域名的IP地址 --> 创建与目标TCP链接 --> 若是是HTTPS，初始化并完成TLS握手 --> 向页面对应的url发送请求

2. 资源响应/渲染

   接收响应-->是HTML，则解析-->对页面引用进行有限排序-->添加引用资源到请求队列-->等待

   ​ -->不是HTML，判断关键资源没有接收完成 --> 等待

   ​ 关键资源接受完成 --> 渲染页面 --> 还要继续接受其余资源 --> 等待

   ​ --> 无其余资源，页面渲染结束

关键性能指标

1. 延迟
2. 带宽
3. DNS查询
4. 创建链接时间
5. TLS协商时间
6. 首字节时间
7. 内容下载时间
8. 开始渲染时间
9. 文档加载完成时间

H1面临的问题

• 队头阻塞
• 低效的TCP利用（拥塞窗口）
• 臃肿的消息首部
• 受限的优先级设置
• 第三方资源限制了加载速度（H2也不可避免）

性能优化技术

DNS查询优化

1. 限制域名的数量
2. 选择合适的域名服务器
3. 利用DNS预取指令，例如预取ajax.googleapis.com:页面中加入标签<link rel="dns-prefetch" href="//ajax.googleapis.com">, 这样在下载处理主页面的同时，预取指令就能开始解析指定的域名。

优化TCP链接

1. 利用preconnect指令，如同DNS预取指令：<link rel="preconnect" href="//fonts.example.com">
2. 借助CDN，使用户请求的资源尽量近，这样能够更快得到响应于是更快终止当前链接，减小后续创建新链接的延时。

避免重定向

1. 利用CDN代替客户端在云端实现重定向
2. 同一域名重定向，在Web服务器端处理（rewrite规则），避免重定向。

客户端缓存

​ 客户端缓存TTL（生存时间），设置HTTP首部cache-control及max-age(单位秒)，或者expires首部。

网络边缘缓存

​ hold'til told!

条件缓存

​ 304 Not Modified状态码，若请求资源发生了变化，则直接返回资源；若请求资源未发生变化，则直接返回内容没变的提示消息：HTTP首部包含Last-Modified-Since, 请求体中包含实体校验码ETag。

压缩和代码极简化

​ 极简化 --> 无损压缩（gzip，deflate, brotli）

CSS资源放在JS资源和图片以前

1. 按期清理不须要的JS资源
2. 若是JS执行顺序可有可无，而且必须在onload以前运行，能够设置async属性，这样就能够并行下载JS。
3. 若是JS执行顺寻很重要，而且在DOM加载完成后执行，能够设置defer属性。
4. 不影响页面初次展现的页面，onload事件触发后执行。

图片优化

1. 取出图片中地理位置、时间戳等元信息
2. 针对于image overloading，可使用技术手段根据用户设备状况提供剪裁过的图片。

反模式

​ 针对于HTTP/1.1适用，但对于H2来讲拔苗助长的作法，由于HTTP/2对于每一个域名只会开启一个链接。HTTP/2能够并行处理多个请求。

1. 生成精灵图和资源合并/内联
2. 域名拆分
3. 禁用cookie域名