前言
作为一个前端，如果能够深刻理解 HTTP 通信，能够让我们在日常开发工作中快速定位问题。最近正好参加了第一节字节青训营，今天刚肝完HTTP的课程，这里做了一些笔记，希望对大家有帮助，有记录错误的地方还望大佬们指出~🧐
一、初识HTTP
首先哈，先抛出一个问题哈，说一说从输入URL到页面呈现发生了什么？
这是一个可以无限难的问题。出这个题目的目的就是为了考察你的 web 基础深入到什么程度。介于这篇文章主要是介绍HTTP的相关知识，这里就把重要的过程描述一下~
具体可参考(1.6w字)浏览器灵魂之问，请问你能接得住几个？
网络请求——> 网络响应——>构建DOM树——>样式计算——>生成布局树——>建图层树——>生成绘制列表——>生成图块和生成位图——>显示器显示内容
这是一个极简的图，其实上每一步都十分的复杂，这篇文章主要是基于HTTP协议，我们就主要就聚焦于浏览器发起请求，服务器响应请求这一网络通信部分。
1.1 什么是HTTP
Hyper Text Transfer Protocol超文本传输协议- 应用层协议，基于TCP协议
- 请求 响应
- 简单可扩展
- 无状态
HTTP在设计的时候它是一个Client-Server这样的协议，它是有请求和响应的。
二、协议分析
2.1 发展
我们每一个优秀的技术其实都是在不断进步的过程。HTTP也是更新迭代了多个版本~
2.2 HTTP报文结构
对于TCP而言，在传输的时候分为两个部分：TCP头和数据部分,而HTTP类似，也是header+body。
起始行
对于请求报文来说，起始行类似下面这样:
POST / HTTP/1.1 复制代码
也就是方法 + 路径 + http版本。
对于响应报文来说，起始行类似下面这样:
HTTP/1.1 403 Forbidden 复制代码
由http版本、状态码和原因三部分组成。
头部
空行
实体（数据部分）
就是具体的数据了，也就是body部分。请求报文对应请求体, 响应报文对应响应体。
Method
Safe（安全的）:不会修改服务器的数据的方法
GET HEAD OPTIONS
Idempotent(幂等)：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的所有safe的方法都是Idemponent的
GET HEAD OPTIONS PUT DELETE
状态码
1xx:指示信息，表示请求已接收，继续处理
2xx:成功，表示请求已被成功接收、理解、接受
3xx:重定向，要完成请求必须进行更进一步的操作
4xx:客户端错误，请求有语法错误或请求无法实现
5xx:服务端错误，服务端未能实现合法的请求。
常见状态码：
- 200 OK —客户端请求成功
- 301 永久重定向
- 302 临时重定向
- 401 请求未经授权
- 404 请求资源不存在，可能是输入了错误的URL
- 500 服务器内部发生了不可预期的错误
- 504 Gateway Timeut-网关或者代理的服务器无法在规定的时间内获得想要的响应。
RESTful API
- 早已推广使用
- 传统API设计：把每个url当做一个功能
- Restful API设计：把每个url当做一个唯一的资源 RESTful API 是一种API设计风格
- 每一个URI代表一种资源；
- 客户端和服务器之间，传递这种资源的某种表现层；
- 客户端通过HTTP method，对于服务器端资源进行操作，实现“表现层状态转化”
尽量不用url参数,用method表示操作类型。
常见请求头
常见响应头
缓存
cookie
Set-Cookie -response
2.3 HTTP/2概述：
更快、更稳定、更简单 帧（frame）:HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。
消息：与逻辑请求或响应消息对应的完整的一系列帧。
数据流：已建立的连接内的双向字节流，可以承载一条或多条信息。
交错发送，接收方重组织
HTTP/2连接都是永久的，而且仅需要每个来源一个连接
流控制：阻止发送方向接收方发送大量数据的机制
服务器推送
2.4HTTPS概述
HTTPS是经过TSL/SSL加密
- 对称加密：加密和解密都是使用同一个密钥
- 非对称加密，加密和解密需要使用两个不同的密钥：公钥（public key）和私钥（private key）
三、场景分析
3.1 静态资源
我们打开Chrome调试工具，选择到NetWork选项，尝试访问掘金官网,我们一起来研究一下
静态资源请求的详细内容。这里我们研究的静态资源请求是index.css
我们可以发现这个状态码是200，从硬件缓存中读取，因此有时状态码为200，不一定会发起一个真实的请求。
我们来看一下响应头：
cache-control这个指定了过期时间，与强缓存相关。
last-modified指定了最后修改时间，与协商缓存相关。
access-control-allow-origin允许哪些origin能访问我们，与同源策略有关。
content-type指定了实体数据的类型
静态资源方案：缓存+CDN+文件名hash
CDN：内容分发网络，通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务。
文件名hash的作用是根据文件内容生成hash值，这样，文件内容变化的时候，请求文件名就不一样，就不会用到缓存，以获取到最新文件内容。
3.2 登录
我们退出掘金官网，然后尝试登录，捕捉登录请求，请求如下：
General：
Response Headers：
Request Headers：
- 向什么地址做了什么动作？
- 使用POST方法
- 目标域名 juejin.cn
- 目标path/passport/web/sms_login/?account_sdk_source=web
- 携带了哪些信息，返回了哪些信息
- 携带信息
- Post body，数据格式为form
- 希望获取的数据格式为json
- 已有的cookie
- 返回信息
- 数据格式json
- 种cookie的信息
鉴权
3.3 视频播放
视频直播协议
| 协议 | 描述 | 优点 |
| HLS | HTTP live Streaming，Apple公司；基于HTTP协议；把一段视频流，分成一个个小的基于HTTP的文件来下载 | - 跨平台 |
| RTMP | Real Time Messaging Protocol，Adobe公司，基于TCP | 时延低 |
| HTTP-FLV | 基于HTTP，http+flv，将音视频数据封装成FLV格式，然后通过HTTP协议传输给客户端 | 时延低 |
3.4 文件上传
主流方案：
为什么文件上传时有很多的
options的请求?
因为触发了跨域的场景。作用是问服务端是否允许跨域。
跨域解决方案
- CORS
- 代理服务器
- 同源策略是浏览器的安全策略，不是HTTP的
- iframe
- 诸多不便
四、实战
AJAX之XHR
AJAX之Fetch
标准库：HTTP/HTTPS
- 默认模块，无需安装其他依赖
- 功能有限/不是十分友好
常用的请求库：axios
- 支持浏览器、node.js环境
- 丰富的拦截器
用户体验
我们在生产环境中，其实还关心用户的体验，我们希望用户有更优秀的体验效果，那么用户体验去优化它，一方面是大家知道的性能优化，还有一点是在网络上做一些优化，比如用HTTP2，它的传输效率而是更高的，使用CDN，传输获取的数据是更快的等等。
网络优化：
稳定性：
五、扩展
5.1 通信方式
WebSocket
- 浏览器与服务器进行全双工通讯的网络技术
- 典型场景：实时性高，例如聊天室
- URL使用ws://或wss://等开头
QUIC：Quic UDP Internet Connection
虽然基于UDP，但是可以实现类似于TCP的可靠传输及加密传输。
QUIC也是HTTP3版本的协议之一，也就是说HTTP3将会是基于UDP的！
最后
⚽好啦，关于HTTP的基础知识就介绍完啦，本篇只是起到一个抛砖引玉的效果，对HTTP感兴趣的同学可以再深入研究一下~
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！😘
