HTTP 使用指南 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 5 天

0x1 初识 HTTP 协议

  1. 网页加载流程

    user 输入网址
    browser 进程
    处理输入信息
    页面加载完成
    浏览器内核
    发起请求
    Internet
    服务器
    读取响应
    渲染

    HTTP 位于 OSI 模型和 TCP/IP 的应用层(Application)

  2. 什么是 HTTP

    1. 超文本传输协议:Hyper Text Transfer Protocol

    2. 作为应用层协议,基于传输层的 TCP

    3. 分为请求响应两种模式

      1. 请求

        POST /index.php HTTP/1.1
        HOST: www.example.com
        Content-Type: application/json
        Content-Length: 15
        
        {"msg": "hello,world"}
        
      2. 响应

        HTTP/1.1 200 OK
        Data: Sun, 1, Jan 2022 00:00:00
        server: Tengine
        content-type: text/html; charset=utf-8
        
        <!doctype html><html><...
        
    4. 具有简单可扩展的特点

    5. 是一种无状态的协议:每个请求孤立

0x2 协议分析

  1. 发展历程

    HTTP/0.9
    单行协议
    HTTP/1.0
    构建可扩展性
    HTTP/1.1
    标准化协议
    HTTP/2
    更优异的表现
    HTTP/3
    草案
  2. 报文分析

    1. 请求 Requests

      POST /index.php HTTP/1.1
      HOST: www.example.com
      Content-Type: application/json
      Content-Length: 15
      
      {"msg": "hello,world"}
      
    2. 响应 Responses

      HTTP/1.1 200 OK
      Data: Sun, 1, Jan 2022 00:00:00
      server: Tengine
      content-type: text/html; charset=utf-8
      
      <!doctype html><html><...
      

    HTTP/1.1 报文结构:

    start-line
    HTTP headers
    请求: Method Path Version
    响应: Version StatusCode StatusMessage
    empty line
    body
    • Method:请求方法

      Method描述特点
      GET请求一个指定资源的表示形式Safe、Idempotent
      POST用于将实体提交到指定的资源
      PUT用请求有效载荷替换目标资源的所有当前表示Idempotent
      DELETE删除指定的资源Idempotent
      HEAD请求一个与 GET 请求的响应相同的响应,但没有响应体Safe、Idempotent
      CONNECT建立一个到由目标资源标识的服务器的隧道
      OPTIONS用于描述目标资源的通信选项Safe、Idempotent
      TRACE沿着到目标资源的路径执行一个消息环回测试
      PATCH用于对资源应用部分的修改
      • Safe:安全,不会修改服务器的数据的方法
      • Idempotent:幂等,同样的请求被执行一次与连续多次的效果相同、服务器状态相同
    • Path:请求资源路径

    • Version:使用的 HTTP 版本

    • StatusCode:状态码

      • 1xx:已接收,正在处理
      • 2xx:成功(200:请求成功)
      • 3xx:重定向,完成请求需要进一步操作(302:临时跳转)
      • 4xx:客户端错误(404:资源不存在)
      • 5xx:服务器端错误(504:网关超时)
      • 详解
    • StatusMessage:状态信息

    • RESTful API:一种 API 设计风格(Representational State Transfer)

      • 每个 URI 代表一种资源
      • 客户端与服务器之间传递这种专业的某种表现层
      • 客户端通过 Method 对服务器端资源进行操作,实现表现层状态转化
    • 常用请求头

      请求头描述
      Accept接收类型,表示浏览器支持的 MIME 类型
      Content-Type客户端发送出去实体内容的类型
      Cache-Control指定请求和响应遵循的缓存机制
      If-Modified-Since对应服务端的 Last-Modified,用来匹配看文件是否变动
      Expires缓存,在这个时间内不会请求,直接使用缓存,服务端时间
      Max-age代表资源在本地缓存多少秒,有效时间内不会请求,而是使用缓存
      If-None-Match对应服务端的 ETag,用来匹配文件内容是否改变
      Cookie有 cookie 并且同域访问时会自动带上
      Referer该页面的来源 URL
      Origin最初的请求发起的源头(端口)
      User-Agent用户客户端的一些必要信息
    • 常用响应头

      响应头描述
      Content-Type服务端返回的实体内容的类型
      Cache-Control指定请求和响应遵循的缓存机制
      Last-Modified请求资源的最后修改时间
      Expires应该在什么时候认为文档已经过期
      Max-age客户端的本地资源应该缓存时间(开启 Cache-Control 后有效)
      ETag资源的特定版本的标识符
      Set-Cookie设置和页面关联的 Cookie,服务器通过这个头部把 Cookie 传给客户端
      Server服务器的一些相关信息
      Access-Control-Allow-Origin服务器端允许的请求 Origin 头部
    • 缓存:强缓存、协商缓存

      将缓存返回浏览器
      304
      200
      开始
      浏览器
      发起 GET 请求
      读取浏览器缓存
      是否有缓存
      强缓存是否新鲜
      上一次响应头是否有 ETag
      发起请求, 请求头带 If-None-Match
      上一次响应头是否有 Last-Modified
      发起请求, 请求头带 If-Modified-Since
      状态是否为 304
      请求响应完成
      协商缓存
    • Cookie

      Set-Cookie-response描述
      Name=value各种 cookie 的名称和值
      Expires=Date有效期,缺省时仅在浏览器关闭前有效
      Path=Path限制指定 cookie 的发送范围的文件目录
      Domain=domain限制 cookie 生效的域名
      secure进制 HTTP 安全连接时才发送 cookie
      HttpOnlyJS 脚本无法获得 cookie
      SameSite=[None|Strict|Lax]None:同站、跨站都可以发送
      Strict:仅在同站发送
      Lax:允许与顶级导航一起发送
  3. HTTP/2 概述

    1. 帧(frame):HTTP/2 通信的最小单位,每个帧都包含帧头,至少也会标识出当前帧所属的数据流
    2. 消息:与逻辑去或响应信息对应的完整的一系列帧
    3. 数据流:已建立的连接内的双向字节流,可以承载一条或多条信息
    4. 流控制:阻止发送方向接收方发送大量数据的机制
  4. HTTPS 概述

    1. Hyper Text Transfer Protocol Secure
    2. 通过 TSL/SSL 加密
      1. 对称加密:密钥相同
      2. 非对称加密:分公钥和私钥

0x3 场景分析

  1. 静态资源
    1. 静态资源方案:缓存 + CDN + 文件名Hash
      • CDN:Content Delivery Network
      • 通过用户就近性和服务器负载的判断,CDN 确保内容以一种极为高效的方式为用户的请求提供服务
  2. 登录
    1. 业务场景:表单填写/扫码
    2. 技术方式:SSO(单点登录:Single Sign On)
    3. 当出现跨域时,会出现 OPTIONS 请求
      • 域名构成:[Scheme]://[HostName]:[port]
    4. 操作流程
      1. 向目标域名的目标 path 使用 POST 方法发送请求
      2. 携带信息:
        • 发送的数据格式为 form(表单)
        • 希望获取的数据格式为 json
        • 已有的 cookie
      3. 返回信息
        • 数据格式为 json
        • 各种 cookie 的信息
      4. 鉴权
        • Session + cookie
        • JSON Web Token
  3. 跨域
    1. 跨域解决方案
      1. CORS:Cross-Origin Resource Sharing
      2. 代理服务器
      3. Iframe(不推荐)

0x4 实战分析

  1. 浏览器

    1. Ajax 的 XHR

      1. XHR:XML Http Request

      2. ready说明
        UNSENT代理被创建,但尚未调用open()方法
        OPENEDopen()方法已被调用
        HEADERS_RECEIVEDsend()方法已被调用,并且头部和状态已经可获得
        LOADING下载中
        DONE下载操作已完成
    2. Ajax 的 Fetch

      1. XHR 升级版
      2. 使用 Promise
      3. 模块化设计响应、请求和头部对象
      4. 通过数据流处理对象,支持分块读取
      postData('http://example.com/answer', { answer: 42 })
          .then(data => console.log(data))
          .catch(err => console.log(err))
      
      function postData(url, data) {
          return fetch(url, {
              body: JSON.stringify(data),
              cache: 'no-cache',
              credentials: 'same-origin',
              headers: {
                  'user-agent': 'Mozila/4.0 MDN Example',
                  'content-type': 'application/json'
              },
              method: 'POST',
              mode: 'cors',
              redirect: 'follow',
              referrer: 'no-referrer'
          }).then(res => res.json())
      }
      
  2. NodeJS

    1. 标准库 HTTP/HTTPS

      1. 默认模块,功能有限
    2. 常用请求库 axios

      // 全局配置
      axios.defaults.baseURL = "http://api.example.com";
      // 添加请求拦截器
      axios.interceptors.request.use(function(cfg) {
          // 在发送请求前的操作
          return cfg;
      }, function(err) {
          // 对错误请求的操作
          return Promise.reject(err);
      });
      
      // 发送请求
      axios({
          method: 'get',
          url: 'http://test.com',
          responseType: 'stream'
      }).then(function(res) {
          res.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
      });
      
  3. 用户体验

    1. 网络优化

      网络优化
      HTTP/2
      优势
      Binary Format
      Multiplexed
      Server Push
      Header Optimize
      兼容性
      简单实践
      HTTP/3
      CDN 动态加速
      适用场景
      缓存
      回源策略
      缓存刷新
      缓存预热
      缓存击穿
      实践
      DNS 预解析
      网络预连接
      域名
      域名收敛
      域名发散
      压缩
      gzip
      brotil
      HTTPS 性能优化
    2. 稳定性

      稳定性
      重试机制
      超时
      错误
      缓存
      数据安全
      HTTPS
      劫持

0x5 扩展

  1. 通信方式-WebSocket
    • 浏览器与服务器进行全双工通讯的网络技术
    • 适用于对实时性要求较高的场景
    • URL 使用ws://wss://等开头
  2. QUIC
    • Quick UDP Internet Connection
posted @ 2023-01-23 13:01  SRIGT  阅读(7)  评论(0编辑  收藏  举报  来源