HTTP实用指南 | 青训营笔记

前端菜李
41 阅读5分钟

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

初识HTTP

HTTP(Hyper Text Transfer protocal) 超文本传输协议，应用层协议，基于TCP协议，无状态的协议

协议分析

HTTP/1.1 标准化协议

  1. 报文
  • Method: GET：请求指定资源的表示形式，只用于获取数据
    POST: 将实体提交到指定的资源
    PUT: 用请求有效载荷替换目标资源的所有当前表示
    DELETE: 删除指定资源
    HEAD: 请求一个与Get请求的响相同的响应，但没有响应体
    CONNECT：建立一个到由目标资源标识的服务器的隧道
    OPTIONS：描述目标资源的通信选项
    TRACE：沿着目标资源的路径执行一个消息环回测试
    PATCH：用于对资源应用部分修改
    特性：
  • safe:不会修改服务器的数据 -> MEthod:GET HEAD OPTIONS
  • idempotent(幂等):同样的请求被执行一次和连续执行多次的效果是一样的，服务器的状态也是一样的，所有safe的方法都是idempotent的 -> MEthod:GET HEAD OPTIONS PUT DELETE
  • 状态码： 1XX:指示信息，表示请求已被接收，继续处理
    2XX:成功，表示请求已被成功接收、理解、接受
    3XX:重定向，要完成请求必须进行更进一步的操作
    4XX:客户端错误，请求有语法错误或请求无法实现
    5XX:服务器端错误，服务器未能实现合法的请求
    常见状态码：
    200 客户端请求成功
    301 资源（网页等）被永久转移到其他URL
    302 临时跳转
    401 请求未经授权
    404 请求资源不存在
    500 服务器内部发生了不可预期的错误
    504 Gateway Timeout 网关或者代理的服务器无法在规定的时间内获得想要的响应
  • Restful API REST - Representational State Transfer 表现层状态转化
    这种API设计风格的特点：
    每一个URI(Uniform Resource Idetifier 统一资源标识符)代表一种资源；
    客户端和服务器之间的通信传递这种资源的某种表现层；
    客户端通过HTTP Method对服务器端资源进行操作，实现：表现层状态转化"
  • 常用请求头 Accept:接收类型，表示浏览器支持的MIME(Multipurpose Internet Mail Extensions)类型，对标服务器端返回的Content-Type
    Content-Type:客户端发送出去的实体内容的类型
    Cache-Control:指定请求和响应遵循的缓存机制，如no-cache
    IF-MOdified-Since:对应服务端的Last-Modified,用来匹配是否变动，只能精确到1s内
    Expires:缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间 Max-age:代表资源在本地缓存多少秒，有效时间内不会请求，使用缓存
    If-None-Match:对应服务端的ETag,用来匹配文件内容是否改变，精确
    Cookie:有cookie并且同域访问时会自动带上
    Referer:该页面的来源URL,适用所有类型的请求，精确到页面地址，csrf拦截常用字段
    Origin:请求最初发起来源，精确到端口
    User-Agent:用户客户端的一些必要信息，如UA头部等
  • 常用响应头 Content-Type:服务端返回的实体内容的类型
    Cache-Control:同上
    Last-Modified:请求资源的最后修改时间
    Expires:文档过期认证时间，过期不再缓存
    Max-age:客户端的本地资源应缓存多少秒，开启Cache-Control后有效
    ETag:资源的特定版本的标识符
    Set-Cookie:设置和页面关联的cookie,服务器通过这个头部把cookie传给客户端
    Server:服务器的一些相关信息
    Access-Control-Allow-Origin:服务器端允许的请求Origin头部
  • 缓存
    • 强缓存： Expires,时间戳
      Cache-Control: 可缓存性: no-cache 协商缓存验证
      no-store 不使用任何缓存
      到期：max-age:单位s，存储的最大周期，相对于请求的时间
      重新验证*重新加载：must-revalidate 一旦资源过期，在成功向原始服务器验证之前不能使用
    • 协商缓存： Etag/If-None-Match:资源的特定版本的标识符
      Last-Modified/If-Modified-Since:最后修改时间，绝对时间

HTTP/2

  • 帧：HTTP/2通信的最小单位，每个帧包含帧头，至少会标识出当前帧所属的数据流，二进制编码
  • 消息：与逻辑请求或响应消息对应的完整的一系列帧
  • 数据流：已建立的连接内的双向字节流，可以承载一条或多条消息
  • HTTP/2连接都是永久的，一个来源对应一个连接
  • 流控制： 阻止发送方向接收方发送大量数据的机制
  • 服务器推送

HTTPS

Hypertext Transfer Protocal Secure
经过TSL/SSL加密
对称加密：加密和解密用同一个密钥
非对称加密：加密和解密用两个不同的密钥 公钥 私钥

场景分析

  • 静态资源部署方案：缓存+CDN+文件名hash CDN:Content Delivery Network
    通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务
  • 跨域：
    • CORS：Cross-Origin Resource Sharing 服务器在返回报文中响应头设置一个允许的Header，如Access-Control-Allow-Origin/Access-Control-Expose-Headers等等
    • 代理服务器
    • 其他方法：postMessage方法、express使用cors等
  • 登录： 记住登陆状态：鉴权
  • Session+cookie
  • JWT(Json Web Token) SSO(Single Sign On) 单点登录：
    cookie+redis
    token

实战

  • XHR:XMLHttpRequest readyState:
    0 UNSENT 代理被创建但尚未调用open()方法
    1 OPENED open()方法已经被调用
    2 HEADERS_RECEIVED send()方法已经被调用并且头部和状态已经可获得
    3 LOADING 下载中；responseText属性已经包含部分数据
    4 DONE 下载操作已完成
  • Fetch 使用Promise；
    模块化设计：Response,Request,Header
    通过数据流处理对象，支持分块读取
  • node标准库-HTTP/HTTPS
  • axios

优化用户体验

  • 网络优化： HTTP/2,CDN动态加速，DNS预解析，网络预连接，域名，压缩，HTTPS性能优化
  • 稳定性： 重试机制（超时、错误），缓存（最后一道防线），数据安全(HTTPS)

其他通信方式

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

  • QUIC Quick UDP Internet Connection

avatar
文章
阅读
粉丝