前端 http学习笔记

1.http全称是HyperText Transfer Protocol 超文本传输协议

2. TCP/IP协议栈分为应用层，传输层，网络层，数据链路层。 HTTP工作在应用层。底层数据传输由TCP UDP负责

3.HTTP的版本

1.最常用的是HTTP/1.1  HTTP/2 HTTP/3

2.HTTP/1.1依然在被广泛使用，  http/2引入了多路复用，二进制帧层，头部压缩等特性。提升了不少传输性能 。 HTTP/3基于QUIC协议使用UDP作为传输层进一步降低了延迟提升了传输性能

4.HTTPS

https是http的假面全版本，全称是HTTPSecure。在圆是版本上加盖了一层SSL/TLS实现加密传输。除了http3  tls在其他版本并不强制要求

5.HTTP请求和响应

http协议大体上是一种问答形式 

客户端发出请求，服务端处理请求，再给出响应。无论是html文档还是图片视频等资源都是通过这种问答来传输的，服务器会根据不同场景返回不同响应码

只需要记住2开头表示成功处理，3开头表示重定向，4开头表示客户端错误，5开头表示服务端错误

6.请求头和响应头

1.用于请求上下文的：Host，Referer，User-Agent

2.用于响应上下文的Allow，Server

3.用于缓存的Cache-Control  Last-Modified/Last-Modified-Since ETag/Lf-NoneMatch

4.用于Cookie的Cookie Set-Cookie

5.用于安全的X-Frame-Options Strict-Transport-Security(HSTS)  Content-Security-Policy(CSP)

6.用于跨域控制（CORS）的Origin  Assess-Control

7.用于描述消息主题的 Content-* 一套

7.XHR及其拓展

前端请求资源和浏览器异步交互都是通过HTTP协议完成。 最早使用XMLHttpRequest(XHR)完成 

后来许多三方库基于他做了功能拓展如JQuery，Ajax，Superagent，Axios。。。

8.Fetch

Node.js环境下的fetch是基于Undici实现的 而在边缘运行时（Edge Runtime）中Fetch API会根据运行平台不同实现不同。因此在现代前端应尽可能使用Fetch API或者其封装库来管理异步请求。（fetch不支持上传进度）

9.大型客户端应用中的变体

不是所有的客户端环境都支持现金的HTTP/2或HTTP/3原始HTTP协议在更复杂的高并发场景下 会不够高效稳定。因此大型技术基建会涉及一层无线网关（Gateway）增加登陆验证，请求跟踪，监控，限流等功能前端代码通过远程过程调用（RPC）的方式而非直接使用HTTP的方式

以bilibili客户端为例

客户端请求

前端发起一个grpc请求至gateway网关同时发送了多个自定义请求头。比如x-bili-mid表示当前用户，xbili-trace-id用于链路日志追踪，x-bili-device-bin表示设备信息等

服务端响应

Content-Type表示这是一个grpc响应

Bili-Trace-Id用于日志追踪等

可以看出相比浏览器的http  客户端中http更为复杂，定制化的HTTP协议能带来更强大的功能

最后：本文是根据b站稻谷键盘的小麦视频总结。 有兴趣可以去搜现代前端开发必知看更多