HTTP协议 | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第7天，学习的是关于HTTP协议的相关知识，包

这是我参与「第五届青训营」伴学笔记创作活动的第7天，学习的是关于HTTP协议的相关知识。

一、 HTTP协议基本知识

（一）基本定义

Hyer Text Transfer Protocol
超文本传输协
应用层协议，基于TCP协议
请求响应
简单可扩展
无状态：每一个请求之间是孤立的

（二）发展历程

1. HTTP/0.9:

请求GET/mypage.html
响应只有HTML文档

2. HTTP/1.0——也是标准化协议版本

增加了Hoadar
有了状态码
支持多种文档类型

3. HTTP/1.1

链接复用
缓存
内容协商

4. HTTP/2

二进制协议
压缩 header
服务器推送

（三）协议分析

1. 协议分析——报文结构

以HTTP/1.1为例

（1）各字段含义

a. Method

特点：

safe：不会修改服务器数据的方法
idempotent（幂等）：同样的请求执行一次与执行多次效果一样，服务器状态也一样；所有的safe方法都是idempotent的

b. 状态码

例如：

200 OK:客户端请求成功
301-资源(网页等)被永久移到其它URL
302-临时跳转
401 Unauthorized-请求未经授权
404-请求资源不存在,可能是输入了错误的URL
500-服务器内部发生了不可预期的错误
504 Gateway Timeout-网关或者代理的服务器无法在规定的时间内获得想要的响应

c. RESTful API

一种API设计风格;rest- Represe State Transfer

每一个URI代表一种资源；
客户端和服务器之间，传递这种资源的某种表现层；
客户端通过HTTP method，对服务器端资源进行操作,实现“表现层状态转化”。

（2）常用请求头

Accept：告诉服务端，该请求所支持的相应数据类型
Cookie：将客户端的cookie放在请求头里一并发送给服务器端；
Referer：表示从哪个URL跳转的；
Cache-control：对服务端返回内容进行缓存控制，即是否需要在客户端保存下来；
User-Agent：表示客户端使用的操作系统及版本，CPU类型，浏览器版本；
Host：头域指定请求资源的Intenet主机和端口号；
Connection：表示客户端与服务器连类型，是否是Keep-Alive

（3）常用响应头

Content--type：服务端返回的实体内容的类型
Cache-Control：指定请求和响应遵循的缓存机制,如no-cache
Last -Modified：请求资源的最后修改时间
Expires：应该在什么时候认为文档已经过期从而不再缓存它
Max-ape：客户端的本地资源应该缓存多少秒,开启了 Cache-Control后有效
ETap：资源的特定版本的标识符, Etags类似于指纹
Set-Cookie：设置和页面关联的 cookie,服务器通过这个头部把 cookie传给客户端
Server：服务器的一些相关信息
Access-Control-Origin-- Allow-Origin：服务器端允许的请求头部(譬如为*)

以缓存为例

强缓存

Expires（到期时间），时间戳

Cahce-Control

可缓存性：    
   no-cache：协商缓存验证
   no-store：不使用任何缓存
   public、private等

 到期：
   max-age：单位是秒，存储的最大生存周期，相对于请求的时间

 重新验证*重新加载：
  must-revalidate：一旦资源过期，在成功向原始服务器验证之前，不能使用

协商缓存

Etag/If-None-Match：

资源的特定版本的标识符，类似于指纹

Last-Modified/If-Modified-Since：

```
最后的修改时间
```

2. 协议分析——版本发展

HTTP/2：更快、更稳定、更简单

相关概念：

帧（fram）：HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。
消息：与逻辑请求或响应消息对应的完整的一系列帧。
数据流：已建立的连接内的双向字节流，可以承载一条或多条消息：交错发送，接受方重组织。
复用性：HTTP/2连接都是永久的，而且仅需要每个来源一个连接。
流控制：阻止发送方向接收方发送大量数据的机制
服务器推送

二、HTTP 协议的应用场景分析

（一）场景分析——静态分析

以新浪微博为例：

打开chrome
输入:www.sina.com
打开控制台

切换到network

可以已经看出：

返回状态码是200；
（from memory cache）：从本地缓存拿的响应

由上图响应头，可以看出：

强缓存（max-age=xxxxx）
Cache-control：以秒为单位，换算一下，4h
资源类型：css（content-type） 静态资源方案：缓存 + CDN + 文件名hash

（二）场景分析——登录

账号密码登录：
打开控制台——network——勾选preserve log——过滤quick_login
观察请求

跨域问题，导致了请求方法为option
协议、主机名、端口任意一者不同都会出现跨域问题
HTTP的默认端口号443
解决跨域问题

（1）CORS（ Cross-Origin Resource Sharing ）：跨源资源共享；

（2）代理服务器：同源策略是浏览器的安全策略，不是HTTP的；

（3）Iframe：诸多不便。

下一次进入页面的时候，网站为什么能够记住登陆状态呢——鉴权

（1）Session + cookie （大部分这种门户网站）

用户发起提交请求给服务器，包括用户名密码等等
服务器处理，鉴别其正确性，若正确则返回Session将其种到cookie（Set-Cookie:session = …）
用户再发送时：GET Cookie:session=…
服务器处理鉴别后返回一些登陆信息的

（2）JWT（JSON web token）服务器本地不会存储返回的token唯一性，登陆时间短等

（3）SSO：单点登录（Single Sign On）

三、HTTP 协议实战分析

（一）实战分析——浏览器

1. AJAX之XHR

XHR： XMLHttpRequest
readyState

2. AJAX之Fetch

XMLHttpRequet的升级版
使用Promise
模块化设计，Response，Request，Header对象
通过数据流处理对象，支持分块读取

（二）实战分析——Node篇

1.标准库: HTTP/HTTPS

默认模块，无需安装其他依赖
功能有限/不是十分友好

2.常用的请求库: axios

支持浏览器、nodejs环境
丰富的拦截器

//全局配置
axios.defaults.baseURL = "https://api.example.com";
//添加请求拦截器
axios.interceptors.request.use(function (config) {
	//在发送请求之前做些什么
	return config;
}，function (error) {
	//对请求错误做些什么
	return Promise.reject(error );
});
//发送请求
axios( { 
    method: 'get',
    url: 'http://test.com',
    responseType: 'stream
    }).then( function(response) {
    response.data.pipe( fs.createWriteStream('ada_lovelace.jpg'))
});

（三）实战分析——用户体验

1.网络优化

2.稳定性

重试是保证稳定的有效手段，但要防止其加剧恶劣情况：比如网络连接就是断开了
缓存合理使用，作为最后一道防线。

四、扩展——通信方式

（一）WebSocket

浏览器与服务器进行全双工通讯的网络技术
典型场景：实时性要求高，例如聊天室
URL使用ws://或wss://等开头

（二）QUIC：Quick UDP Internet Connection 基于UDP

0-RTT建联（首次建联除外)。
类似TCP的可靠传输。
类似TLS的加密传输，支持完美前向安全。
用户空间的拥塞控制，最新的BBR算法。
支持h2的基于流的多路复用，但没有 TCP的HOL问题。
前向纠错FEC。
类似MPTCP的Connection migration。
应用暂不多。

HTTP协议 | 青训营笔记