这是我参与「第五届青训营」笔记创作活动的第5天。

一、本堂课重点内容

HTTP简介
协议分析
常见场景
实际应用
其他网络协议

二、详细知识点介绍

协议分析

HTTP0.9 单行协议，只能传输HTTP文本
HTTP1.0 增加了Header，有了状态码，支持多种文档类型
HTTP1.1 实现了链接复用，缓存，内容协商，目前为止使用时间最久
HTTP2 2015年，提高传输速度，性能，二进制协议，Header压缩，服务器推送

HTTP1.1协议报文

起始行
- Request：方法目标地址 HTTP版本
  - 方法 get post put delete head connect options trace patch 需要查文档。安全的方法：不会修改服务器数据的方法，包括 get head options；幂等的方法，同样的请求执行一次与执行多次的效果是一样的，服务器的状态也是一样的，包括get head options put delete
- Response：HTTP版本状态码返回值
  - 状态码 1xx 2xx 3xx 4xx 5xx查文档
Headers
- 请求头
- 响应头
空行
报文体

RESTful API REST=Representational State Transfer表现层状态转化

每一个URI代表一种资源
客户端和服务器之间，传递这种资源的某种表现层
客户端通过HTTP method，对服务器的资源进行操作

缓存

强缓存、协商缓存

强缓存

资源本地有了就直接用头部字段：

Expires 时间戳，到期时间
Cache-Control 可能为以下值
- 可缓存性，包括以下部分，其他的需要查文档
  - no-cache 可以缓存，但要用缓存时需要验证
  - no-store 不使用任何缓存
- 有效期，到期时间
  - max-age 如max-age=3153600，单位为秒，相对于请求时间存储的最大生存周期
- 是否需要重新验证或重新加载
  - must-revalidate 一般与max-age一起用，一旦资源过期，必须要跟服务器通信进行验证，否则不能使用

协商缓存

资源在本地有了，但能不能用，是不是最新的，需要与Server做一次通信，彼此验证一下，有个协商过程

头部字段：

Etag（响应头）/If-None-Match（请求头）资源特定版本标识符，相当于指纹，Etag一般是字符串
Last-Modified（响应头）/If-Modified-Since（请求头）最后的修改时间，是绝对时间

缓存优先级

cookie

借助cookie携带用户身份相关的信息

Set-Cookie响应头：

HTTP2

更快、更稳定、更简单

帧（frame）是HTTP/2通信的最小单位，每个帧都包含帧头，至少会标识出当前帧所述的数据流，采用二进制编码，加入了新的压缩算法

消息是一个逻辑请求或响应对应的完整的一系列帧。

数据流是已建立连接内的双向字节流，可以承载一条或多条信息，客户端与服务端建立连接后，会有一条或多条字节流，每条字节流承载一条或多条消息。

所有的帧可以交错发送，由接收方重组织。

HTTP/2中的连接都是永久连接，实现了复用性。

HTTP/2中具备流控制机制，浏览器可以阻止服务器发送大量的数据，如浏览器播放视频暂停了，则浏览器可以不再接收数据，阻止服务器发来的大量数据。

HTTP/2实现了服务器推送，如服务器发送的一个HTML内引用了js或css等，服务器可以将这些js和css主动推送给客户端，但需要浏览器和服务器支持这些功能，不过一般js和css是静态资源，可能不会放在业务逻辑的服务器上。

场景分析

静态资源

静态资源部署方案：缓存+CDN+文件名hash，把hash值写到文件名中，表示文件发生了变化，则会访问到新的资源

跨域

www.example.com:443 中scheme、host name、port有任何一个不一样，都是跨域

预请求：获知服务端是否允许该跨域资源请求，相关协议头：

Access-Control-Allow-Origin
Access-Control-Expose-Headers
Access-Control-Max-Age
Access-Control-Allow-Credentials
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Request-Method
Access-Control-Request-Headers
Origin

跨域解决方案：CORS，代理服务器，Iframe

三、实践练习例子

Ajax XHR，XMLHttpRequest

Ajax Fetch是XHR的升级版，可以使用Promise，有了模块化设计Response、Request、Header对象，支持分块读取数据流处理对象。

Node中原生库有http和https，不好用。常用的有axios，浏览器和Node都支持，有丰富的拦截器

WebSocket，浏览器和服务器全双工通讯，实时性高，URL用ws:// 或wss:// 开头

QUIC（Quick UDP Internet Connection），类似tcp的可靠传输，类似TLS的加密传输，用户空间实现拥塞控制，支持http2的多路复用，前向纠错FEC，是HTTP3草案的一部分，仍在研究阶段。

四、课后个人总结

本节课讲了HTTP的基础知识，包括HTTP的发展，HTTP协议的结构，缓存，cookie，并结合静态资源访问，登录等介绍了HTTP的使用场景。HTTP是应用层重要协议，是承载web前后端通信的重要方式，很多基础知识在学校里已经接触过，不过本节课介绍的鉴权，SSO和Fetch等在理论课上并未过多了解，需要以后继续查阅文档学习。

五、参考链接

‌‌‬‌‍‍⁣⁢⁣‌‍⁢⁣⁤⁢⁡‌‌‬⁡‌‍‌⁡⁤⁢⁢⁣⁤⁡‌‬⁤‬‍Web标准与前端开发.pptx - 飞书云文档 (feishu.cn)

HTTP实用指南.pptx - 飞书云文档 (feishu.cn)

HTTP 使用指南 | 青训营笔记