一、初识HTTP协议

1.1 初识-HTTP协议是什么

Hyper Text Transfer Protocol 超文本传输协议
- 可以承载多种语言HTML、CSS、JavaScript
- API
应用层协议、基于TCP协议
- HTTP底层是基于TCP传输层协议
请求-响应
- HTTP请求语义相对简单
简单可扩展
- 可以自定义一些Header
无状态
- 每个请求之间是孤立的，当前的请求是不知道之前的请求内容

1.2 协议分析

1.2.1 http协议的发展历程

timeline
      title HTTP协议的发展历程
      HTTP/0.9 单行协议: 请求GET/mypage.html
               : 相应只有HTML文档
      HTTP/1.0 构建可扩展性: 增加了Header
               : 有了状态码
               : 支持多种文档类型
      HTTP/1.1 标准化协议: 链接复用
               : 缓存
               : 内容协商
      HTTP/2 更优异的表现: 二进制协议
               : 压缩header
               : 服务器推送
      HTTP/3   : 草案

1.2.2 报文解析

请求方法 Method

关键字	作用
GET	请求一个指定资源的表示形式，使用GET的请求应该只被用于获取数据
POST	用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用
PUT	用请求有效载荷替换目标资源的所有当前表示
DELETE	删除指定的资源
HEAD	请求一个与GET请求的响应相同的响应，但没有响应体
CONNECT	建立一个到由目标资源标识的服务器的隧道
OPTIONS	用于描述目标资源的通信选项
TRACE	沿着到目标资源的路径执行一个消息环回测试
PATCH	用于对资源应用部分修改

特性：
- Safe（安全的）：不会修改服务器的数据的方法，例：GET HEAD OPTIONS
- Idempotent（幂等）：同样地请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的所有Safe的方法都是Idempotent的，例：GET HEAD OPTIONS PUT DELETE

状态码 StatusCode

状态码	含义
1xx	指示信息，表示请求已接收，继续处理
2xx	成功，表示请求已被成功接受、理解、接受
3xx	重定向，要完成请求必须进行更进一步的操作
4xx	客户端错误，请求有语法错误或请求无法实现
5xx	服务器端错误，服务器未能实现合法的请求

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

RESTful API

RESTful API：一种API设计风格；REST：Representational State Transfer
特点：
- 每一种URL代表一种资源
- 客户端和服务器之间，传递这种资源的表现层
- 客户端通过HTTP method，对服务器端资源进行操作，实现“表现层状态转化”
示例：

请求	返回码	含义
GET/zoos	200 OK	列出所有动物园，服务器成功返回了
POST/zoos	201 CREATED	新建一个动物园，服务器创建成功
PUT/zoos/ID	400 INVALID REQUEST	更新某个指定动物园的信息（提供该动物园的全部信息）用户发出的请求有错误，服务器没有进行新建或修改数据的操作
DELETE/zoos/ID	204 NO CONTENT	删除某个动物园，删除数据成功

常用请求头/响应头

请求头

请求头	含义
Accept	接受类型，表示浏览器支持的MIME类型（对标服务端返回的Content-Type）
Content-Type	客户端发送出去实体内容的类型
Cache-Control	指定请求和响应遵循的缓存机制，如no-cache
If-Modified-Since	对应服务端的Last-Modified,用来匹配看文件是否变动，只能精确到1s之内
Expires	缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间
Max-age	代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
If-None_match	对应服务端的ETag，用来匹配文件内容是否改变（非常精确）
Cookie	有cookie并且同域访问时会自动带上
Referer	该页面的来源URL（适用于所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段）
Origin	最初的请求是从哪里发起的（只会精确到端口），Origin比Referer更尊重隐私
User-Agent	用户客户端的一些必要信息，如UA头部等

响应头

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

缓存

强缓存：资源本地有直接用即可
- Expires，时间戳
- Cache-Control
  - 可缓存性
    - no-cache：协商缓存验证
    - no-store：不使用任何缓存
  - 到期
    - max-age：单位是秒，存储的最大周期，相对于请求的时间
  - 重新验证*重新加载
    - must-revalidate：一旦资源过期，在成功向原始服务器验证之前，不能使用
协商缓存：本地有一段缓存，需要和Server端进行通信协商验证过后才能确定是否可用
- Etag/If-None-Match：资源的特定版本的标识符，类似于指纹
- Last-Modified/If-Modified-Since：最后修改时间
缓存的识别过程

cookie（Set-Cookie-response）

Name=value	各种cookie的名称和值
Expires=Date	Cookie的有效期，缺省时Cookie仅在浏览器关闭之前有效
Path=Path	限制指定Cookie的发送范围的文件目录，默认为当前
Domain=domain	限制cookie生效的域名,默认为创建cookie的服务域名
secure	仅在HTTPS安全连接时，才可以发送Cookie
HttpOnly	JavaScript脚本无法获得Cookie
SameSite=[None\|Strict\|Lax]	None同站、跨站请求都可发送 Strict仅在同站发送允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送

1.2.3 HTTP/2和HTTPS

HTTP/2

特点：更快、更稳定、更简单
帧(frame)：HTTP/2通信的最小单位。每个帧包含帧头、至少也会标识出当前帧所属的数据流
- 传输方法：二进制（HTTP/1.1为纯文本）
消息：与逻辑请求或响应消息对应的完整的一系列帧
数据流：已建立的链接内的双向字节流，可以承载一条或多条消息
- 交错发送、接收方重组织
HTTP/2连接都是永久的，而且仅需要每个来源一个连接
流控制：阻止发送方向接收方发送大量数据的机制
服务器推送

HTTPS

HTTPS：Hypertext Transfer Protocol Secure
经过TSL/SSL加密
- 对称加密：加密和解密都使用同一个秘钥
- 非对称加密：加密和解密需要使用两个不同的密钥，公钥（public key）和私钥（private key）
- 加密和解密过程：

1.3 常见场景

1.3.1 静态资源

静态资源部署方案：缓存 + CDN + 文件名hash

CDN：Content Delivery Network
- 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务
- CDN运行原理

1.3.2 登录

登录方式：表单登录 or 扫码登录
技术方式：SSO
同域（same-origin）和跨域（cross-origin）

URL组成：www.example.com:443
- scheme：https
- host name：www.example.com
- port：443

同域和跨域的辨别方式

Origin A	Origin B	same-origin or corss-origin
www.example.com:443	www.evil.com:443 example.com:443 login.example.com:443 www.example.com:443 www.example.com:80 www.example.com:443 www.example.com	cross-origin: different domains different subdomains different subdomains different schemes different ports exact match implicit port number (443) matches

注：https默认端口号为443，http默认端口号为80（不写端口号即使用默认端口号）

1.4 实际应用

1.4.1 浏览器

AJAX之XHR对象

XHR：XMLHttpRequest

readystate属性：

值	阶段	含义
0	UNSENT	代理被创建，但尚未调用open()方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已经被调用，并且头部和状态已经可获得
3	LOADING	下载中；responseText属性已经包含部分数据
4	DONE	下载操作已经完成

AJAX之Fetch方法

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

1.4.2 node

标准库HTTP/HTTPS

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

常用的请求库：axios

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

1.4.3 用户体验

稳定性

内容
- 重试机制：超时、错误
- 缓存
- 数据安全：HTTPS、劫持
注意事项
- 重试是保证稳定的有效手段，但要防止加剧恶劣情况（会导致服务器雪崩）
- 缓存合理使用，作为最后一道防线

网络优化

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

QUIC(Quick UDP Internet Connection)

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

HTTP协议学习总结 | 青训营

一、初识HTTP协议

1.1 初识-HTTP协议是什么

1.2 协议分析

1.2.1 http协议的发展历程

1.2.2 报文解析

1.2.3 HTTP/2和HTTPS

1.3 常见场景

1.3.1 静态资源

1.3.2 登录

1.4 实际应用

1.4.1 浏览器

1.4.2 node

1.4.3 用户体验