小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
今天我们来学习学习前端必须要知道的计算机网络知识：HTTP相关，这部分分为两篇，基础篇和实战篇，本篇为基础篇，旨在介绍HTTP的基础知识和基本特点，一起分析一下HTTP报文结构，最后再聊聊HTTP2和HTTPS
本文整体结构采用青训营上课视频+课件，补充了很多内容整合自 《HTTP权威指南》 + 《图解HTTP》 + 技术博文
初识HTTP
背景知识
面试经典题：从在浏览器中输入url到网页呈现，这中间发生了什么？
下面我们来简单介绍一下
如图所示，
- 用户在地址栏输入内容，浏览器内核处理输入信息，不管输入的是不是url，最终都会转换成url地址
- 然后浏览器内核会向这个url地址发起一个请求
- 进入网络
- 服务器端会给出响应
- 浏览器内核会读取响应
- 浏览器内核将响应拿到的数据（一般是HTML）进行渲染
- 最后页面就加载完成了
今天我们主要探索一下网络相关的知识
计算机网络的分层模型 有 OSI七层参考模型 和 TCP/IP四层参考模型，今天我们主要探索应用层中的HTTP协议
概念&特点
HTTP 全称 Hyper Text Transfer Protocol 超文本传输协议
Web浏览器、服务器和相关的Web应用程序都是通过HTTP相互通信的。
- 应用层协议，基于TCP协议
也就是说HTTP使用的是可靠的数据传输协议，用户在访问信息时不用担心数据在传输过程中被损坏或者产生混乱~
- 支持客户/服务器模式，请求+响应
客户向服务器请求服务时,只需传送请求方法和路径
请求
响应
- 简单可扩展
HTTP允许传输任意类型的数据对象 请求头信息可以自定义拓展
- 无连接
无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。
- 无状态
无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。
协议分析
发展历程
- HTTP/0.9 1990年
- HTTP/1.0 1996年5月
- HTTP/1.1 1997年1月 是目前主流的HTTP协议版本
报文
HTTP报文是在HTTP应用程序之间发送的数据块。这些数据块以一些文本形式的元信息（meta-information）开头，这些信息描述了报文的内容及含义，后面跟着可选的数据部分。
我们来简单看一下请求和响应报文
HTTP报文可以分为四个部分：
- 起始行：请求（Method Path Version）、响应（Version StatusCode StatusMessage）
- HTTP Headers：请求头、响应头
- 空行
- body：请求体、响应体
下面我们来仔细分析下这些报文
Method
请求报文的起始行的第一个就是 HTTP协议中的请求方法，是客户端希望服务器对资源执行的动作，下面来看看这些请求方法都是什么含义
| 方法名 | 描述 |
|---|---|
| GET | 请求一个指定资源的表示形式. 使用GET的请求应该只被用于获取数据 |
| POST | 用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用 |
| PUT | 用请求有效载荷替换目标资源的所有当前表示 |
| DELETE | 删除指定的资源 |
| HEAD | 请求一个与GET请求的响应相同的响应，但没有响应体 |
| CONNECT | 建立一个到由目标资源标识的服务器的隧道 |
| OPTIONS | 用于描述目标资源的通信选项 |
| TRACE | 沿着到目标资源的路径执行一个消息环回测试 |
| PATCH | 用于对资源应用部分修改 |
分类
- 安全Safe：不会修改服务器的数据的方法：
GETHEADOPTIONS - 幂等Idempontent：同样的请求被执行一次与连续执行多次的效果时一样的，服务器的状态也是一样的，所有safe的方法都是idempotent的：
GETHEADOPTIONSPUTDELETE
状态码
响应报文的起始行中显示响应状态码，我们来看看这些状态码都有什么含义
常见状态码及含义
| 状态码 | 含义 |
|---|---|
| 200 OK | 客户端请求成功 |
| 301 Moved Permanently | 资源（网页等）被永久转移到其它URL |
| 302 Found | 临时跳转 |
| 401 Unauthorized | 请求未经授权 |
| 404 Not Found | 请求资源不存在，可能是输入了错误的URL |
| 500 Internal Server Error | 服务器内部发生了不可预期的错误 |
| 504 Gateway Timeout | 网关或者代理的服务器无法在规定的时间内获得想要的响应 |
更多内容可以看 【HTTP】HTTP状态码-返回结果-2XX-3XX-4XX-5XX
【补充】RESTful API
一种API设计风格；REST - Representational State Transfer
- 每一个URI代表一种资源；
- 客户端和服务器之间，传递这种资源的某种表现层；
- 客户端通过HTTP method，对服务器端资源进行操作，实现"表现层状态转化"。
| 请求 | 返回码 | 含义 |
|---|---|---|
GET /zoos |
200 OK | 列出所有动物园，服务器成功返回了 |
POST /zoos |
201 CREATED | 新建一个动物园，服务器创建成功 |
PUT /zoos/ID |
400 INVALID REQUEST | 更新某个指定动物园的信息（提供该动物园的全部信息）用户发出的请求有错误，服务器没有进行新建或修改数据的操作 |
DELETE /zoos/ID |
204 NO CONTENT | 删除某个动物园，删除数据成功 |
传统API与RESTful API的区别
- 传统API：把每个URL当作一个功能
- Restful API： 把每个URL当作一个唯一的资源
用 URL 定位资源，用 HTTP 动词（GET，POST，DELETE，PUT）描述操作，尽量不用URL参数，用method表示操作类型
① url参数
- 传统API ：
/api/list?pageIndex=2 - Restful API ：
/api/list/2
② method表示操作类型
传统API
- POST请求
/api/create-blog - POST请求
/api/update-blog?id=100 - GET请求
/api/get-blog?id=100
Restful API
-
POST请求
/api/blog -
PATCH请求
/api/blog/100 -
GET请求
/api/blog/100
请求头
Header首部和请求方法配合工作，共同决定了客户端和服务器能做什么事情。
| 请求头 | 说明 |
|---|---|
| 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 | 资源的特定版本的标识符，Etags类似于指纹 |
| Set-Cookie | 设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端 |
| Server | 服务器的一些相关信息 |
| Access-Control-Allow-Origin | 服务器端允许的请求Origin头部（譬如为*） |
缓存
和缓存相关的协议首部Header
强制缓存
Cache-Control （Response Headers）
- max-age 设置缓存有效时间
- no-cache 不用本地强制缓存，让服务端处理缓存
- no-store 不强制缓存，不让服务端处理缓存，直接返回资源
- private 只能允许最终用户做缓存
- public 允许中间路由、代理做缓存
Expires （Response Headers） 控制缓存过期，已被Cache-Control代替
协商缓存
服务端缓存策略
服务端判读客户端资源，是否和服务端资源一样
一致返回304，否则返回200和最新的资源
Last-Modified [资源标识] 资源最后修改时间
Etag [资源标识] 资源唯一标识（一个字符串，类似人类的指纹）
最后来看看浏览器发送请求使用缓存的整体流程
cookie
前面说过HTTP是无状态的协议，如何让他保持状态呢？就需要设置我们的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 仅在同站发送 Lax允许与级导航一起发送，并将与第三方网站发起的GET请求一起发送 |
HTTP2
更快、更稳定、更简单
可以去这个网站测试一下 HTTP/1.1 和 HTTP/2 的比较 http2.akamai.com/demo ，这个是一个加载379张图片的demo
基本概念
- 帧（frame）: HTTP/2 通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流
HTTP2性能提升的核心就在于二进制分帧层。HTTP2是二进制协议，他采用二进制格式传输数据而不是1.x的文本格式。
1.1响应是文本格式，而2.0把响应划分成了两个帧，HEADERS（首部）和 DATA（消息负载） 是帧的类型。
一条HTTP响应，划分成了两个帧来传输，并且采用二进制来编码
-
消息（Message）: 与逻辑请求或响应消息对应的完整的一系列帧。特定消息的帧在同一个流上发送，这意味着一个HTTP请求或响应只能在一个流上发送。
-
数据流（Frame）: 已建立的TCP连接内的双向字节流，可以承载一条或多条消息
多路复用
交错发送，接收方重组织
HTTP2建立一个TCP连接，一个连接上面可以有任意多个流（stream），消息分割成一个或多个帧在流里面传输。帧传输过去以后，再进行重组，形成一个完整的请求或响应。这使得所有的请求或响应都无法阻塞。
-
HTTP/2 连接都是永久的，而且仅需要每个来源一个连接
-
流控制：阻止发送方向接收方发送大量数据的机制
服务器推送
服务器端推送使得服务器可以预测客户端需要的资源，主动推送到客户端。
HTTPS
HTTPS：Hypertext Transfer Protocol Secure
关于HTTPS相关的知识，我们在《Web开发安全之旅-防御篇》就已经聊过了，今天就再补充几点~ 可以结合这看看~
相当于在HTTP和TCP之间经过TSL/SSL加密
我们来看看两种加密方式的区别
- 对称加密：加密和解密都是使用同一个密钥
- 非对称加密：加密和解密需要使用两个不同的密钥：公钥（public key）和私钥（private key）
然后呢，掘金上的这个博文也说的特别好 《大前端进阶 安全》系列 HTTPS详解（通俗易懂） 可以看看~ 因为我看老师PPT上的下面这张图就是出这里的~