Http协议入门到实战分析| 青训营

结构

image.png

初识HTTP协议

初识HTTP

浏览器0到渲染做了什么?

image.png

什么是http

image.png

  • Hyper Text Transfer Protocol超文本传输协议
  • 应用层协议,基于TCP协议
  • 请求响应
  • 简单可扩展
  • 无状态

协议分析

报文

Method

image.png

状态码

image.png

  • 200 0K- 客户端请求成功
  • 301- 资源 (网页等) 被永久转移到其它 URL
  • 302-临时跳转
  • 401 Unauthorized - 请求未经授权
  • 404- 请求资源不存在,可能是输入了错误的 URL500- 服务器内部发生了不可预期的错误504 Gateway Timeout-网关或者代理的服务器无法在规定的时间内获得想要的响应

RESTful API

**RESTful API **: 一种API设计风格, REST Representational State Transfer

  1. 每一个URI代表一种资源
  2. 客户端和服务器之间,传递这种资源的某种表现层
  3. 客户端通过HTTP method,对服务器端资源进行操作,实现"表现层状态转化"

image.png

常用的请求头

image.png

常用的相应头

image.png

缓存

image.png
image.png

cookie

image.png

发展

image.png

http2

概述:更快,更稳定,更简单

  1. **帧(frame) **: HTTP/2通信的最小单位,每个帧都包含帧头,至少也会标识出当前帧所属的数据流。
  2. 二进制
  3. 消息:与逻辑请求或响应消息对应的完整的一系列帧。
  4. 数据流:已建立的连接内的双向字节流,可以承载一条或多条消息。
  5. HTTP/2连接都是永久的,而且仅需要每个来源一个连接
  6. 流控制:阻止发送方向接收方发送大量数据的机制

image.png

https概述

  • HTTPS: Hypertext TransferProtocol Secure
  • 经过 **TSL/SSL **加密
  • 对称加密: 加密和解密都是使用同一个密钥
  • 非对称加密,加密和解密需要使用两个不同的密钥: 公钥 (public key)和私钥 (private key)

image.png

Http协议的应用场景分析

场景分析

静态资源

image.png

登录

image.png

跨越

image.png

  • CORS
  • Cross-Origin Resource Sharing
  • 预请求:获知服务端是否允许该跨源请求 (复杂请求)
  • 相关协议头:
    • Access-Control-Allow-OriginAccess-Control-Expose-Headers
  • Access-Control-Max-Age
  • Access-Control-Allow-Credentials
  • Access-Control-Allow-Methods
  • Access-Control-Allow-Headers
  • Access-Control-Request-MethodAccess-Control-Request-Headers
  • Origin

跨越的解决方案

  • CORS
  • 代理服务器

同源策略是浏览器的安全策略,不是HTTP的

  • lframe

诸多不便
image.png
image.png

鉴权

image.png

sso(单点登录 Single Sign On)

image.png

HTTP实战分析

浏览器篇

AJAX之XHR(原生)

image.png
image.png

AJAX之Fetch

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

image.png

node篇

标准库:HTTP/HTTPS

  • 默认模块,无需安装其他依赖
  • 功能有限/不是十分友好

image.png
image.png

用户体验

网络优化

image.png

稳定性

  • 重试是保证稳定的有效手段,但要防止加剧恶劣情况
  • 缓存合理使用,作为最后一道防线

image.png

更多

通信方法

WebSocket

UTP(QUIC基于UPT封装)

image.png

猜你喜欢

转载自blog.csdn.net/Azbtt/article/details/132127357