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

前言

课程重点:

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

HTTP协议概述

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

浏览器处理输入信息
发起请求
接收响应
渲染网页

image.png

2.HTTP协议

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

3.HTTP协议的发展历程

image.png

4.HTTP报文结构

1HTTP请求报文

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

code.png

2HTTP响应报文

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

code.png

5.请求方法

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

不会修改服务器的数据的方法。
GETHEADOPTIONS

2幂等

同一个请求执行多次的效果是一样的服务器的状态也是一样的。
GETHEADOPTIONSPUTDELETE

6.状态码

image.png

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

7.Resultful API

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

8.常用请求头

image.png

9.常用响应头

image.png

10.缓存

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

image.png

image.png

11.Cookie

image.png

HTTP/2

1.HTTP/2概述

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

2.帧

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

3.消息和数据流

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

HTTPS

1.HTTPS概述

  • 经过TSL/SSL加密

image.png

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

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

image.png

场景分析

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

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

image.png

2.静态资源部署方案

缓存+CDN+文件HASH

3.为什么会有OPTIONS请求

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

4.跨域的解决方案

  • 代理服务器
  • IFrame

5.鉴权方案

  • Session + Cookie
  • JWT

实战

1.AJAX

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

2.网络优化

image.png

3.稳定性

image.png

4.QUIC

  • 0-RTT建联
  • 类似TCP的可靠传输
  • 类似TSL的加密传输支持完美前向安全
  • 用户空间的拥塞控制最新的BBR算法
  • 支持h2基于流的多路复用但没有HTTP的HOL问题
  • 前向纠错FEC类似MPTCP的Connection migration
阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6