http与前端 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第7天

初识http

• 访问页面过程
• • browser进程处理输入信息
  • 浏览器内核发起请求
  • 服务器响应
  • 浏览器读取响应
  • 渲染
  • 加载完成
• http：超文本传输协议
• 属于应用层协议，基于TCP
• 简单可扩展，无状态

协议分析

发展历程

graph TD
http0.9只有getse并且只能返回html --> HTTP1.0增加header等 -->http1.1提出链接复用和缓存等 --> http2二进制协议等

报文（1.1）

• 起始行

• • 在request中声明method

    • get、post、put、delete等
    • 特点：安全（get、head、options）、幂等（多次执行效果一致get、head、put、delete等）

  • responses声明状态码

    状态码	代表
    1xx	指示信息，表示已经接收
    2xx	成功
    3xx	重定向（301永久转移，302临时跳转）
    4xx	客户端错误（404资源不存在）
    5xx	服务端错误（500内部发生不可预期错误）

  • restful API：一种设计风格，每个URI代表一种资源，B\S服务器之间传递这种资源的表现层，客户端通过HTTP method对资源进行操作，实现表现层状态转化。

• headers：请求头和响应头，代表不同的处理逻辑

  • 缓存

    • 强缓存

      字段	含义
      expires	时间戳
      cache-control	可缓存性、到期事件、资源过期如何处理

    • 协商缓存

      字段	含义
      Etag/if-None-Match	资源版本标识符
      Last-Modified/if-Modified-Since	最后修改事件

    • 缓存优先级

  • cookie

    字段	意义
    Name	cookie名称
    Expires	有效期
    Path	限制Cookie的发送范围的文件目录
    Domain	cookie生效的域名

  | secure | 仅在https中发送 | | httpOnly | JS无法获取Cookie |

• body

http2

• 更快更稳更简单
• frame：通信最小单位，至少标识出当前帧所属的数据流，且使用二进制
• 消息：与逻辑请求或响应消息对应的完整的一系列帧
• 数据流：已经建立的连接内的双向字节流，可以承载多条消息
• 连接是永久的
• 服务器推送（提前push可能要用的资源）

https

• 在http基础上添加了TSL/SSL加密
• 使用对称加密+非对称加密

实战

浏览器

• readyState

  值	意义
  0	unsent，代理被创建但未open()
  1	opened,调用了open()
  2	headers_received,send()方法已经调用且头部和状态可以获得
  3	loading，下载中
  4	done，操作完成

• fetch，xhr的升级版，可以使用Promise，模块化设计，可以分块读取

node

• http、https
• axios

用户体验

• 快：缓存等
• 稳定：重试机制、数据安全

更多

WebSocket

• 浏览器与服务器进行全双工通讯的网络技术
• 两方可以相互通信
• 聊天室。。。等实时性场景

QUIC

• UDP
• 发送速率快
• 一般游戏里用。。。