前端入门 - 理论篇
一、协议分析—报文
1.1 Method
- GET 读请求，获取资源请求
- POST 提交请求
- PUT 已有载体的替换
- DELETE 删除
- HEAD (少) 与GET几乎一致 但是没有响应体
- CONNECT(少) 建联的过程
- OPTIONS 通信选项的前置请求
- TRACE 做测试
- PATCH 做修改
1.2 Method的安全与幂等
-
Safe ：不会修改服务器的数据的方法 GET HEAD OPTIONS
-
Idempotent(幂等) ：同样的请求执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的。
所有Sage的方法都是Idempotent的。GET HEAD OPTIONS PUT DELETE
2 状态码
-
1xx(少) 接收到请求 需要继续去处理
-
2xx 成功 200 OK
-
3xx 重定向，需要有进一步操作才能完成
- 301 永久重定向
- 302 临时重定向
-
4xx 客户端有错误
- 401 未授权
- 404 请求了一个错误的目标地址
-
5xx 服务器端错误
- 500 服务器有一些错误，但是具体是什么错误是不明确的
- 504 网关超时了
3 RESTful API
- 一种API设计风格；Representational State Transfer 表现层状态转化
4 常用请求头
-
Accept 表示要去接收什么类型的资源(对应server的Content-Type)
-
Content-Type 发送的实体内容的类型
-
Cache-Control
-
If-Modified-Since
-
Expires
-
Max-age
-
If-None-Match
-
Cookie HTTP请求是一个无状态的请求，但是实际中我们希望让HTTP带有状态信息。
- 有cookie并且同域访问时会自动带上
-
Referer 表示请求来源相关的字段，该页面的来源URL
-
Origin 表示请求来源相关的字段，最初的请求是从哪里发起的，只会精确到端口
-
User-Agent 存储了一些客户端的信息，比如说当前请求是从IOS发送的，还是...发送的
5 常用响应头
- Content-Type 表示返回的实体内容的类型
- Cache-Control
- Last-Modified
- Expires
- Max-age
- Etag
- set-Cookie 告诉浏览器设置哪些cookie信息，以及这些cookie信息有哪些权限控制
- Server 服务器的一些相关信息
- Access-Control-Allow-Origin s erver允许哪些Origin头来请求接口
6 缓存
-
强缓存 资源如果本地有了，直接用就好了
-
Expires，到期时间
-
Cache-Control
-
可缓存性
- no-cache 协商缓存验证
- no-store 不适用任何缓存
- public
- private
-
到期
- max-age 单位是秒 请求从接收到开始多长时间之后才会过期，存储的最大周期
-
重新验证，重新加载
-
must-revalidate 一般与max-age一起用，表示说一旦资源过期，必须要与服务器通信一下，看看缓存是不是新的可用的。
浏览器与server断网了，如果没有设置must-revalidate，本地有缓存的话，断网的情况下是可以用的，但是如果设置了must-revalidate，断网之后就算本地有缓存也是不可以用的。
-
-
-
-
协商缓存 本地有一份缓存，但是缓存能不能用，是不是最新的，需要跟server端做一个通信，彼此去验证一下。
- Etag(response)/If-None-Match(request) 类似于指纹 ‘字符串’呈现 资源的标识符
- Last-Modified(response)/If-Modified-Since(request) 最后修改时间
7 cookie
Set-Cookie - response 是server返回的，浏览器设置的一些cookie信息(键值对)
- Expires=Date Cookie的有效期
- Path=Path 限制指定Cookie的发送范围的文件目录，默认为当前
- Domain=domain Cookie是在哪些域名下才会生效，默认为创建cookie的服务域名
- secure 仅在HTTPS安全连接时，才可以发送Cookie
- HttpOnly JS里有API可以获取Cookie，有Cookie泄露的风险，如果设置HttpOnly，JS无法获取Cookie
- SameSite=[None|Strict|Lax] 同站策略 防范跨站脚本攻击
二、协议分析—发展
1.HTTP/2:更快、更稳定、更简单
- 帧(frame) : HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流
- 二进制
- 消息：逻辑上能和请求或者响应消息对应起来的一系列帧聚合在一起，称之为消息
- 数据流：已建立的连接内的双向字节流，可以承载一条或多条消息。
- 交错发送，接收方重组织
HTTP/2基于TCP，TCP需要有建立连接的过程。对于之前的HTTP，如果Client进行请求每次都创建一个连接，消耗是很大的。
- HTTP/2连接都是永久的，而且仅需要每个来源一个连接
- 流控制 阻止发送方向接收方发送大量数据的机制(在浏览器看电影，看到第10分钟，暂停了，那么浏览器就不会继续缓存了)
-
服务器推送
client请求一个page.html 在该html中有script.js和style.css，为了加快处理效率，server可以提前把两个文件push给client。有一个主动推送信息给client的能力。
2.HTTPS概述
- 经过TSL/SSL加密
- 对称加密：加密和解密都使用同一个密钥
- 非对称加密：加密和解密都使用不同的密钥
三、场景分析—静态资源
状态码200，一定发起了请求吗？
1.静态资源部署
把静态资源放在CDN(Content Delivery Network)上。
通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务。
Q：用了缓存，能保证用户快了，怎么保证用户拿到的够新？
A：在文件名上做手脚 能够让用户保证每次访问的时候一定是最新的
四、场景分析—登录
对于上图中，三部分，如果有不同，则认为是跨域请求。
