HTTP实用指南 | 青训营笔记

66 阅读3分钟
  • 这是我参与第五届青训营伴学笔记创作活动的第5天

初识HTTP

image.png

什么是HTTP

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

image.png

协议分析

发展

image.png

报文

  • Method
    • Safe(安全的):不会修改服务器数据的方法 GET HEAD OPTIONS
    • Idempotent(幂等):同样的请求被执行一次与连续执行多次效果是一样的,服务器状态也是一样的,所有Safe都是Idempotent的 GET HEAD OPTIONS PUT DELETE image.png

状态码

  • 200 OK 客户端请求成功
  • 301 资源被永久转移到其他URL
  • 401 Unauthorized 请求未经授权
  • 404 请求资源不存在 可能输错了URL
  • 500 服务器内部发生了不可预期的错误
  • 504 Gatrway Timeout 网关或者代理服务器无法再规定时间内获得想要响应

image.png

RESRful API

  • 是一种设计风格 REST Representational State Transfer
    • 每一个URL代表一种资源
    • 客户端服务器之间,传递这猴子那个资源的某种表现层
    • 客户端通过HTTP method 对服务器资源进行操作,实现表现层状态转换

image.png

常用请求头

image.png

常用响应头

image.png

缓存

  • 强缓存

image.png

  • 协商缓存

image.png

  • 缓存流程 image.png

cookie

image.png

HTTP/2:更快 更稳定 更简单

  • 帧frame HTTP/2通信最小的单位,每个帧都包含帧头,至少也会标识出当前帧所属的数据流

  • 消息:与逻辑请求或响应消息对应的完整的一系列帧

  • 数据流:已建立的连接内的双向字节流,可以承载一条或多条消息

  • HTTP/2有意思的特性

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

image.png

HTTPS

  • Hyper Text Transfer Protocol Secuer
  • 经过TSL/SSL加密
    • 对称加密:加密和解密使用同一个密钥
    • 非对称加密,加密和解密需要使用不同的密钥:公钥 和 私钥

image.png

常见场景

静态资源

  • 静态资源方案:缓存 + CDN + 文件名hash
    • CDN:Content Delivery Network
    • 通过用户就近性和服务器负载判断,CDN确保内容以一种极为高效的方式为用户的请求提供服务

登录

跨域

image.png

  • CORS(Cross-Origin Resource Sharing)
    • 预请求 获知服务器是否允许该端跨域请求(复杂请求)
    • 相关协议头

image.png

  • 代理服务器
    • 同源策略是浏览器的安全策略,不是HTTP的

image.png

  • Iframe
    • 诸多不便

鉴权

  • Session + cookie

image.png

  • JWT(JSON web token)

image.png

  • SSO:单点登录(Single Sign On)

实际应用

浏览器/node.js

AJAX之XHR

image.png

AJAX之Fetch

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

标准库HTTP/HTTPS

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

常用库 axios

  • 支持浏览器,nodejs环境
  • 丰富的拦截器

用户体验优化

网络优化

image.png

image.png

  • 预解析 预连接

稳定性

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

image.png

了解更多

WebSocket

  • 浏览器与服务器进行全双工通讯的网络技术
  • 典型场景
    • 实时性要求高 例如聊天室
  • URL使用ws://或wss://等开头

image.png

QUIC

  • Quick UDP Internet Connection
  • 0-RTT建联(首次建联除外)。
  • 类似TCP的可靠传输
  • 类似TLS的加密传输,支持完美前向安全。
  • 用户空间的拥塞控制,最新的BBR算法
  • 支持h2的基于流的多路复用,但没有TCP的HOL问题
  • 前向纠错FEC
  • 类似MPTCP的Connection migration。

image.png

image.png