HTTP实用指南（下）| 青训营笔记

沈点心
34 阅读3分钟

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

重点内容

  • 场景分析 - 静态资源
  • 场景分析 - 登录
  • HTTP 协议实战 - 浏览器
  • HTTP 协议实战 - Node篇
  • 网络优化手段
  • HTTP 协议拓展 - 通信方式

场景分析

以今日头条为例

  • 打开控制台
    • 右键->检查
    • F12
  • 切换到network

静态资源

  • 状态码为200 不一定是发起请求 image.png

image.png

image.png

  • 强缓存
  • cache-control：一年
  • 允许所有域名访问
  • 资源类型：CSS

image.png

静态资源方案

缓存 + CDN + 文件名hash

  • CDN：Content Delivery Network
  • 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务

image.png

登录

  • 业务场景

    • 表单登录
    • 扫码登录

  • 技术方式

    • SSO
      image.png

  • 账号密码登录

  • 打开控制台-network-勾选preserve log-过滤quick_login

  • 观察请求 image.png

跨域

  • 存在跨域的问题，出现OPTIONS的请求 image.png

  • same-origin

  • cross-origin

image.png

image.png

  • CORS（Cross-Origin Resources Sharing）
  • 预请求：获知服务端是否允许该跨源请求（复杂请求）
  • 相关协议头
    • Access-Control-Allow-Origin
    • Access-Control-Expose-Headers
    • Access-Control-Max-age
    • Access-Control-Allow-Credentials
    • Access-Control-Allow-Methods
    • Access-Control-Allow-Headers
    • Access-Control-Request-Method
    • Access-Control-Request-Headers
    • Origin

image.png

跨域解决方案

  • CORS
  • 代理服务器
    • 同源策略是服务器的安全策略，不是HTTP的
  • Iframe
    • 诸多不便

image.png

栗子

  • 向什么地址做了什么动作？
    • 使用POST方法
    • 目标域名 sso.toutiao.com
    • 目标path /quick_login/v2/
  • 携带信息
    • post body，数据格式为form
    • 希望获取的数据格式为json
    • 已有的cookie
  • 返回信息
    • 数据格式json
    • cookie的信息 image.png

image.png

image.png

image.png

image.png

image.png

  • 鉴权
  • session + cookie

image.png

  • JWT（JSON web token）

image.png

  • SSO：单点登录（Single Sign On）

image.png

实战

常用的请求库：axios

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

image.png

浏览器篇

AJAX之XHR

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

image.png

AJAX之Fetch

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

image.png

node篇

标准库：HTTP/HTTPS

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

image.png

用户体验

  • 网络优化

image.png

  • CDN是否开启H2的性能对比

image.png

  • 预解析、预连接

image.png

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

扩展

QUIC：Quick UDP Internet Connection

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

image.png

image.png

通信方式

WebSocket

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