web

HTTP协议

    flowchart LR
      v1(HTTP1.1-1999年) --分帧复用--> v2(HTTP2-2015年)
      v2 --tcp转向udp-->v3(HTTP3-2021年)

HTTP不变的协议过程
HTTP底层传输变化
HTTP1.1改进
- 默认持久连接
- 增加Cookie,虚拟主机,动态内容支持
- 使用CDN的实现域名分片机制
HTTP1.1问题
- TCP的慢启动
- 多条TCP连接竞争带宽
- 队头阻塞
HTTP2改进
- 二进制分帧层
- 请求的优先级
- 服务器推送
- 头部压缩
HTTP2问题
- 有序字节流引出的队头阻塞（Head-of-line blocking），使得HTTP2的多路复用能力大打折扣
- TCP与TLS叠加了握手时延，建链时长还有1倍的下降空间
- 基于TCP四元组确定一个连接，这种诞生于有线网络的设计，并不适合移动状态下的无线网络，这意味着IP地址的频繁变动会导致TCP连接、TLS会话反复握手，成本高昂。
HTTP3改进
- HTTP3基于UDP协议重新定义了连接，在QUIC层实现了无序、并发字节流的传输，解决了队头阻塞问题
- HTTP3重新定义了TLS协议加密QUIC头部的方式，既提高了网络攻击成本，又降低了建立连接的速度
- HTTP3 将Packet、QUIC Frame、HTTP3 Frame分离，实现了连接迁移功能，降低了5G环境下高速移动设备的连接维护成本

jwt(JSON Web Token)

是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519).该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。
服务器采用秘钥签名检验token内部数据是否正确，不再保存session
传统session方案,占用内存,不易扩展

sequenceDiagram
    actor u as 用户
    actor s as 服务器
    u->>s: login登陆
    s-->>u: form填写用户名密码
    u->>s: Post用户名密码
    s->>s: 数据库检查,生成并保存session
    s-->>u: setcookie sessionID
    u->>s: cookies带上sessionID
    s->>s: 根据sessionID,获取session
    s-->>u: 提供服务

jwt方案,服务器私用secret,除过期时间之外,token不易作废

sequenceDiagram
    actor u as 用户
    actor s as 服务器
    u->>s: login登陆
    s-->>u: form填写用户名密码
    u->>s: Post用户名密码
    s->>s: 数据库检查,利用secret生成token
    s-->>u: Authorization token
    u->>s: Authorization token
    s->>s: 根据secret,检验token
    s-->>u: 提供服务

jwt-token构成

flowchart LR
  subgraph Header
        h(json对象base64编码)
    end
    subgraph Payload
        p(json对象base64编码)
    end
    subgraph Signature
        s(加密计算后base64编码)
    end

  Header--用点号.连接-->Payload--用点号.连接-->Signature

Header示例

{
 "alg": "HS256",
 "typ": "JWT"
}

Payload示例

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}

Signature

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

实例展示

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

系统容错限流-熔断-降级

限流,当核心服务的处理能力不能应对外部请求的突增流量时，必须采取限流的措施。
熔断,非核心服务

  sequenceDiagram
      actor u as 用户
      actor l as 断路器
      actor s as 服务
      u->>l: 请求
      l->>s: 转发请求
      s-->>l: 成功回包
      l-->>u: 转发成功回包
      u->>l: 请求
      l->>s: 转发请求
      s-->>l: 失败
      l->>l: 累计失败,达到阀值
      l-->>u: 转发失败
      u->>l: 请求
      l->>l: 检查服务恢复?
      l-->>u: 回包失败

服务熔断是指调用方访问服务时通过断路器做代理进行访问，断路器会持续观察服务返回的成功、失败的状态，当失败超过设置的阈值时断路器打开，请求就不能真正地访问到服务了。
CLOSED：默认状态。断路器观察到请求失败比例没有达到阈值，断路器认为被代理服务状态良好。
OPEN：断路器观察到请求失败比例已经达到阈值，断路器认为被代理服务故障，打开开关，请求不再到达被代理的服务，而是快速失败。
HALF OPEN：断路器打开后，为了能自动恢复对被代理服务的访问，会切换到半开放状态，去尝试请求被代理服务以查看服务是否已经故障恢复。如果成功，会转成CLOSED状态，否则转到OPEN状态
降级-采用预设方案行动,针对非核心，非必要服务

webdav

WebDAV （Web-based Distributed Authoring and Versioning）一种基于 HTTP 1.1协议的通信协议。
它扩展了HTTP 1.1，在GET、POST、HEAD等几个HTTP标准方法以外添加了一些新的方法，
使应用程序可对Web Server直接读写，并支持写文件锁定(Locking)及解锁(Unlock)，还可以支持文件的版本控制。

jsonnet

brew install jsonnet

jsonnet

优化方向

浏览器处理缓存,如下图所示
webpack打包
图片换格式WebP
浏览器处理HTML

HTML渲染内部架构

优秀网站

国内cdn介绍

BootCDN: www.bootcdn.cn
七牛云: www.staticfile.org
360: cdn.baomitu.com
字节跳动: cdn.bytedance.com
饿了么：github.elemecdn.com npm.elemecdn.com
知乎：unpkg.zhimg.com

Keyboard shortcuts

技术文档