第五届字节跳动青训营 前端进阶学习笔记（七）HTTP协议入门

前言

课程重点:

• HTTP协议基本概述
• HTTP协议场景分析
• HTTP协议实战

HTTP协议概述

1.输入网址到页面加载完成中间发生了什么

浏览器处理输入信息

发起请求

接收响应

渲染网页

2.HTTP协议

• 全程Hyper Text Transfer Protocol，超文本传输协议。
• 基于TCP协议
• 简单可扩展
• 无状态

3.HTTP协议的发展历程

4.HTTP报文结构

（1）HTTP请求报文

以下是一个HTTP请求报文的基本结构。HTTP报文通常由三个部分组成，请求行、请求首部和请求实体。
其中，请求行通常包含请求方法、URL和HTTP协议版本；请求首部主要包含主机名、持久连接标记、用户代理和语言；请求实体通常会包含客户端想要发送到服务端上的数据，可以使用form-data格式或json格式。

（2）HTTP响应报文

响应报文也由三部分组成，分别是响应状态行、响应首部和响应实体。其中，响应状态行包含了HTTP协议版本、HTTP请求状态、请求状态描述三个参数；响应首部中通常会包含一些持久连接标记、时间日期信息、数据长度和类型等字段；响应实体中存放的就是我们向服务器请求的数据了。

5.请求方法

• GET
• POST
• PUT
• DELETE
• HEAD，请求一个与GET请求相同的响应，但没有响应体
• OPTIONS，描述请求类型
• CONNECT，建立一个到目标资源服务器的隧道
• TRACE，沿目标资源路径建立环回测试
• PATCH，用于对资源应用部分更改

（1）安全的方法

不会修改服务器的数据的方法。
GET、 HEAD、OPTIONS

（2）幂等

同一个请求执行多次的效果是一样的，服务器的状态也是一样的。
GET、 HEAD、OPTIONS、PUT、DELETE

6.状态码

（1）常见状态码

• 200 - 客户端请求成功
• 301 - 资源转移到其他URL
• 302 - 临时跳转
• 401 - 请求未授权
• 404 - 请求的资源不存在
• 500 - 服务器内部错误
• 504 - 网关或代理服务器不能在规定的时间内获得想要的响应

7.Resultful API

• 每个URI代表一种资源
• 客户端和服务端之间传递这种资源的表现层
• 通过不同的请求方，对特定资源进行操作，实现表现层状态转化

8.常用请求头

9.常用响应头

10.缓存

缓存分为强缓存和协商缓存。强缓存直接根据缓存字段来判断是否使用缓存，而协商缓存需要先判断缓存是否可用，才决定是否使用缓存。

11.Cookie

HTTP/2

1.HTTP/2概述

• HTTP/2的每条连接都是永久的，每个来源仅需要一个连接
• 流控制：阻止发送方向接收方发送大量数据的机制
• 服务器推送

2.帧

HTTP/2通信的最小单位，每个帧的帧头中都会至少标识出当前帧所属的数据流。

3.消息和数据流

消息是与逻辑请求或响应消息对应的完整的一系列帧。数据流是已建立连接内的双向数据流，可以承载一条或多条消息。

HTTPS

1.HTTPS概述

• 经过TSL/SSL加密

2.对称加密和非对称加密

• 对称加密：加密和解密使用的是同一组密钥
• 非对称加密，加密和解密需要分别用到公钥和私钥

场景分析

1.状态码为200就代表一定发起了请求吗？

状态码为200不一定代表该请求经过了一系列完整的HTTP请求的过程，若资源设置了强缓存字段，将会直接从本地读取缓存（from disk cache）。

2.静态资源部署方案

缓存+CDN+文件HASH

3.为什么会有OPTIONS请求

OPTIONS请求用于获知服务端是否允许跨域请求。
ps.跨域指请求的主机名和资源所在的主机名的协议、主机名、端口号三个有任意一个不同的部分，就会发生跨域。

4.跨域的解决方案

• 代理服务器
• IFrame

5.鉴权方案

• Session + Cookie
• JWT

实战

1.AJAX

（1）XHR

（2）Fetch

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

2.网络优化

3.稳定性

4.QUIC

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