# 初识 HTTP

在浏览器地址栏输入网址，按下回车后发生了什么？

# 什么是 HTTP

Hyper Text Transfer Protocol
超文本传输协议

应用层协议，基于 TCP 协议
请求响应
简单可扩展
无状态

# 协议分析

# 报文

# Method

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

Safe (安全的)：不会修改服务器的数据的方法

GET
HEAD
OPTIONS

idempotent (幂等)：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的

所有 safe 的方法都是幂等的
PUT
DELETE

# 状态码

200 OK- 客户端请求成功
301- 资源 (网页等) 被永久转移到其它 URL
302 - 临时跳转
401 Unauthorized- 请求未经授权
404 - 请求资源不存在，可能是输入了错误的 URL
500 - 服务器内部发生了不可预期的错误
504 Gateway Timeout - 网关或者代理的服务器无法在规
定的时间内获得想要的响应。

# RESTful API

一种 API 设计风格，REST - Representational State Transfer

每一个 URI 代表一种资源
客户端和服务器之间，传递这种资源的某种表现层:
客户端通过 HTTP method，对服务器端资源进行操作，实现表现层状态转化”。

# 常用请求头

请求头	说明
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	客户端的本地资源应该缓存多少秒，开启了 Cache-Control 后有效
ETag	资源的特定版本的标识符，Etags 类似于指纹
Set-Cookie	设置和页面关联的 cookie，服务器通过这个头部把 cookie 传给客户端
Server	服务器的一些相关信息
Access-Control-Allow-Origin	服务器端允许的请求 Origin 头部 (警如为 *)

# 缓存

# 强缓存

Expires，时间截
Cache-Control
- 可缓存性
  - no-cache: 协商缓存验证
  - no-store: 不使用任何缓存
- 到期
  - max-age: 单位是秒，存储的最大周期，相对于请求的时间
- 重新验证 * 重新加载
  - must-revalidate: 一旦资源过期，在成功向原始服务器验证之前，不能使用

# 协商缓存

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

# HTTP2

更快、更稳定、更简单

消息：与逻辑请求或响应消息对应的完整的一系列帧。
数据流：已建立的连接内的双向字节流可以承载一条或多条消息。
交错发送，接收方重组织
HTTP/2 连接都是永久的，而且仅需要每个来源一个连接
流控制：阻止发送方向接收方发送大量数据的机制
服务器推送

# HTTPS

HTTPS : Hypertext Transfer Protocol Secure

经过 TSL/SSL 加密
对称加密：加密和解密都是使用同一个密钥
非对称加密：加密和解密用不同的密钥
非对称加密，加密和解密需要使用两个不同的密钥：公钥 (public key) 和私钥 (private key)

# 应用场景分析

1. 打开 chrome

2. 输入网址

3. 打开控制台

右键 -> 检查
F12

4. 切换到 network

# 静态资源

access-control-allow-origin:*
age: 2230335
ali-swift-global-savetime: 1625397577
cache-control: max-age=31536000
content-encoding:br
content-length: 26816
content-md5: Cf/SyvzWui5CSr8cu25TFQ==
content-type: text/css; charset=utf-8
date: Sun，04 Jul 2021 11:19:37 GMT
eagleid:276076a016276279126953122e
last-modified: Sun，04 Ju 2021 11:11:19 GMT
server: Tengine
server-timing: cdn-cache;desc=HIT,edge;dur=1
timing-allow-origin:*
vary: Accept-Encoding

缓存策略：强缓存，Cache-control: 一年

其他信息：允许所有域名访问，资源类型 CSS

# 静态资源方案

缓存 + CDN + 文件名 flash

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

# 登录

# 跨域解决方案

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

# 鉴权

Session + Cookie（常用）

JWT ( JSON web token )

# SSO（单点登录）

# 实战

# AJAX 之 XHR

XHR: XMLHttpRequest

# AJAX 之 Fetch

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

# 标准库: HTTP/HTTPS

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

# 常用的请求库:axios

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

# 用户体验

# 网络优化

# 稳定性

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

# 拓展

# WebSocket

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

# QUIC

Quick UDP Internet Connection

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

前端