HTTP实用指南 | 青训营笔记

Kincy
65 阅读6分钟

初识HTTP

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

协议分析

协议发展

image-20230805152316146.png

报文

结构

  • start-line：起始行

    • 请求中：Method、Version
    • 响应中：Version、StatusCode、StatusMessage
    Method说明
    GET请求一个指定资源的表示形式，使用 GET 的请求应该只被用于获取数据
    POST用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用
    PUT用请求有效载荷替换目标资源的所有当前表示
    DELETE删除指定的资源
    HEAD请求一个与 GET 请求的响应相同的响应，但没有响应体
    CONNECT建立一个由目标资源标识的服务器的隧道
    OPTIONS用于描述目标资源的通信选项
    TRACE沿着到目标资源的路径执行一个信息回环测试
    PATCH用于对资源应用部分修改

    • Safe（安全的）：不会修改服务器的数据的方法

      GET、HEAD、OPTIONS

    • Idempotent（幂等）：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的

      所有 safe 的方法都是 Idempotent 的。

      GET、HEAD、OPTIONS、PUT、DELETE

  • HTTP headers：请求头信息

  • empty line：空行

  • body：请求体信息

状态码

  • 1xx：指示信息，表示请求已接收，继续处理

  • 2xx：成功，表示请求已被成功接收、理解、接受

    • 200：OK，客户端请求成功

  • 3xx：重定向，要完成请求必须进行更进一步的操作

    • 301：资源（网页等）被永久转移到其他 URL
    • 302：临时跳转

  • 4xx：客户端错误，请求有语法错误或请求无法实现

    • 401：Unauthorized，请求未经授权

  • 5xx：服务器端错误，服务器未能实现合法的请求

    • 500：服务器内部发生了不可预期的错误
    • 504：Gateway Timeout，网关或者代理的服务器无法在规定的时间内获得想要的响应

RESTful API

RESTful API：一种 API 设计风格；REST：Representational State Transfer

  1. 每一个 URI 代表一种资源
  2. 客户端和服务器之间，传递这种资源的某种表现层
  3. 客户端通过 HTTP method，对服务器端资源进行操作，实现 “表现层状态转化”
请求返回码含义
GET /zoos200 OK列出所有动物园，服务器成功返回了
POST /zoos201 CREATED新建一个动物园，服务器创建成功
PUT /zoos/ID400 INVALID REQUEST更新某个指定动物园的信息（提供该动物园的全部信息） 用户发出的请求有错误，服务器没有进行新建或修改数据的操作
DELETE /zoos/ID204 NO CONTENT删除某个动物园，删除数据成功

常用请求头

请求头说明
Accept接收类型，表示浏览器支持的 MIME 类型（对标服务端返回的 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最初的请求是从哪里发起的（只会精确到端口），Origin 比 Referer 更尊重隐私
User-Agent用户客户端的一些必要信息，如：UA 头部等

常用响应头

请求头说明
Content-Type客户端发送出去实体内容的类型
Cache-Control指定请求的响应遵循的缓存机制，如：no-cache
Last-Modified请求资源的最后修改时间
Expires缓存空值，在这个时间内不会请求，直接使用缓存，服务端时间
Max-age代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
ETag资源的特点版本的标识符，Etags 类似于指纹
Set-Cookie设置和页面关联的 cookie，服务器通过这个头部把 cookie 传给客户端
Server服务器的一些相关信息
Access-Control-Allow-Origin服务器端允许的请求 Origin 头部（譬如：*）

缓存

强缓存

  • Expiers：时间戳

  • Cache-Control

    • 可缓存性

      • no-cache：协商缓存验证
      • no-store：不使用任何缓存

    • 到期

      • max-age：单位是秒，存储的最大周期，相对于请求的时间

    • 重新验证 * 重新加载

      • must-revalidate：一旦资源过期，在成功向原始服务器验证之前，不能使用

协商缓存

  • Etag / If-None-Match：资源的特点版本的标识符，类似于指纹
  • Last-Modified / If-Modified-Since：最后修改时间

image-20230805161231517.png

Cookie

Set-Cookieresponse
Name=value各种 cookie 的名称和值
Expires=DateCookie 的有效期，缺省时 Cookie 仅在浏览器关闭之前有效
Path=Path限制指定 Cookie 的发送范围的文件目录，默认为当前
Domain=domain限制 cookie 生效的域名，默认为创建 cookie 的服务域名
secure仅在 HTTPS 安全连接时，才可以发送 Cookie
HttpOnlyJavaScript 脚本无法获得 Cookie
SameSite=[NodeStrictLax]None 同站、跨站请求都可发送 Strict 仅在同站发送 允许与顶级导航一起发送，并将与第三方网站 发起的 GET 请求一起发送

实际应用

浏览器篇

AJAX 之 XHR

  • XHR：XMLHttpRequest

  • readyState

    状态码状态名说明
    0UNSENT代理被创建，但尚未调用 open() 方法
    1OPENEDopen() 方法已经被调用
    2HEADERS_RECEIVEDsend() 方法已经被调用，并且头部和状态已经可获得
    3LOADING下载中，responseText 属性已经包含部分数据
    4DONE下载操作已完成

AJAX 之 Fetch

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

Node 篇

标准库：HTTP / HTTPS

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

常用

请求库：axios

  • 支持浏览器、NodeJS 环境
  • 丰富的拦截器

用户体验

网络优化

  • HTTP 2

    • 优势

      • Binary Format
      • multiplexed
      • Server Push
      • header optimize

    • 兼容性

    • 简单实践

    • HTTP 3

  • CDN 动态加速

    • 适用场景

      • 静态资源

    • 缓存

      • 回源策略
      • 缓存刷新
      • 缓存预热
      • 缓存击穿

  • DNS 预解析

  • 网络预连接

  • 域名

    • 域名收敛
    • 域名发散

  • 压缩

    • gzip
    • brotil

  • HTTPS 性能优化

稳定性

  • 重试机制

    • 超时

    • 错误

    重试是保存稳定的有效手段，但要防止加剧恶劣情况

  • 缓存

    缓存合理使用，作为最后一道防线

  • 数据安全

    • HTTPS
    • 劫持

扩展

通信方式

WebSocket

  • 浏览器与服务器进行全双工通讯的网络技术

  • 典型场景：实时性要求高

    例如：聊天室

  • URL 使用 ws:// 或 wss:// 等开头

avatar
文章
阅读
粉丝