在深入理解HTTP协议一中，分析了：
- 网络体系结构
- 数据传输过程（主要是TCP）
- HTTP基本特征
在本章中主要分析：
- http1.0、http1.1及http2版本区别
- http报文结构
一、http1.0、http1.1及http2版本区别
http1.0
HTTP/1.0是一次TCP请求只能发送一次http请求，每次请求资源的时候都需要重新发起TCP请求。
http1.0
上图是http1.0请求一次资源的时间过程，可以看出一次请求包含2个RTT,一个是TCP连接，一个http报文数据)。
http1.0的持续连接连接问题可以用实现
不过http1.0的keep-alive默认是关闭的
http1.1
http1.1主要就是解决了 问题，即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive.
队头堵塞
http1.1版允许复用TCP连接，但是同一个TCP连接里面，所有的数据通信是按次序进行的。服务器只有处理完一个回应，才会进行下一个回应。要是前面的回应特别慢，后面就会有许多请求排队等着.
Chrome有个机制，对于同一个域名，默认允许同时建立 6 个 TCP持久连接，使用持久连接时，虽然能公用一个TCP管道，但是在一个管道中同一时刻只能处理一个请求，在当前的请求没有结束之前，其他的请求只能处于阻塞状态。另外如果在同一个域名下同时有10个请求发生，那么其中4个请求会进入排队等待状态，直至进行中的请求完成.
http1.1
上图是简书的一个页面的请求次数，大概是75个，这还是比较少的，浏览器只能够同时建立 6 个 TCP持久连接，那就意味着有60多个请求需要等待.
等待
可以看到同一时刻，只有8个请求在执行。
这就是为什么我们强调要用Spriting合并多张小图为一张大图,这样可以减少http请求的次数。
我们在使用webpack打包资源切分包的时候也不是说包越小越好，太小只会增加http请求次数，从而影响性能。
头部报文巨大
http1.1另外一个缺点是http头较大（相对http2），主要原因是http1.1的头信息只能是文本（ASCII编码）不能是二进制流。
http2
http2主要改进点：
- Header的压缩
- Server Push
- 请求/响应管线化
- 修复在HTTP 1.x的队头阻塞问题
- 在单个TCP连接里多工复用请求
详细参考请深入浅出：HTTP/2
目前主流浏览器都支持HTTP/2，判断网站是否支持http2可以通过一下代码判断
(function(){
// 保证这个方法只在支持loadTimes的chrome浏览器下执行
if(window.chrome && typeof chrome.loadTimes === 'function') {
var loadTimes = window.chrome.loadTimes();
var spdy = loadTimes.wasFetchedViaSpdy;
var info = loadTimes.npnNegotiatedProtocol || loadTimes.connectionInfo;
// 就以 「h2」作为判断标识
if(spdy && /^h2/i.test(info)) {
return console.info('本站点使用了HTTP/2');
}
}
console.warn('本站点没有使用HTTP/2');
})();
测试了一下淘宝是支持http2的。官方解释使用HTTP/2能带来20%~60%的效率提升，所以HTTP/2也是前端性能优化的一个方向。
二、HTTP报文结构
我们在调试模式下查看connect内容，能看到基本上分为3块，基本信息、请求header、响应header。
http报文
HTTP是一个基于请求/响应模式的、一问一答的方式实现服务。即我们通常所说的Request/Response，对应的就是请求报文和响应报文。
请求报文
请求报文结构
主要分为：
- 报文首部（请求行+请求头部）
- 空行
- 报文内容
请求行
请求行由请求、
和
3个字段组成，它们用空格分隔。例如，GET /index.html HTTP/1.1。
常用请求方法有：
GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT
请求头部
请求头部一般分为：
- 通用首部(General Header)
- 请求首部(Request Header)
- 实体首部(Entity Header Fields)
请求头部由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。请求头部通知服务器有关于客户端请求的信息
常用请求头部：
User-Agent：产生请求的浏览器类型。
Accept：客户端可识别的内容类型列表。
Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机。
报文内容
POST方法适用于需要客户填写表单的场合。与请求数据相关的最常使用的请求头是Content-Type和Content-Length.
响应报文
[图片上传失败...(image-b78ad-1597991801950)]
响应报文与请求报文的差异在与,响应报文首部由：
- 状态行
- 响应首部字段
其中状态行
HTTP-Version Status-Code Reason-Phrase CRLF
如：
HTTP/1.1 200 OK
- HTTP-Version 服务器HTTP协议的版本
- Status-Code 服务器发回的响应状态代码
- Reason-Phrase 状态代码的文本描述
状态码类型：
| 状态码 | 含义 |
|---|---|
| 1xx | 指示信息--表示请求已接收，继续处理 |
| 2xx | 客户端请求成功 |
| 3xx | 重定向 |
| 4xx | 客户端错误 |
| 5xx | 服务端错误 |
*注意： 很多人奇怪404，明明是服务器地址不存在，为什么是客户端错，4xx错误是指请求有语法错误或请求无法实现
常见状态：
- 200 OK：客户端请求成功。
- 204 Not Content：正常响应，没有实体。
- 304 Not Modified: 状态未改变 配合(If-Match、If-Modified-Since、If-None_Match、If-Range、If-Unmodified-Since)
- 400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
- 401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
- 403 Forbidden：服务器收到请求，但是拒绝提供服务。
- 404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
- 500 Internal Server Error：服务器发生不可预期的错误。
- 503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常
响应请求首部
分为：
- 通用首部(General Header)
- 响应首部(Response Header)
- 实体首部(Entity Header Fields)
下篇文章中将详细分析HTTP报文的首部字段.
详细报文内容请阅读 HTTP请求报文和HTTP响应报文 和 HTTP协议－HTTP响应报文
网友评论