基础班前端路-Day6 | 青训营
初识HTTP
1.1 什么是HTTP
HTTP:超文本传输协议(Hyper Text Transfer Protocol)
HTTP协议是应用层协议,其底层是基于TCP
协议做的传输层协议,经过了TSL/SSL
加密
对称加密:加密和解密都是使用同一个密钥
非对称加密:加密和解密需要使用两个不同的密钥—公钥和私钥
每个HTTP请求都分为请求和响应两部分,HTTP请求都是语义比较简单的请求,在设计上可以提供很多扩展的能力,即HTTP协议是一个简单可扩展的协议
HTTP是一个无状态的协议,每一个请求之间都是相互孤立的,当前的请求是无法获取之前携带过什么信息,做过什么事情
1.2 协议分析
发展
-
HTTP/0.9-
单行协议
- 只有
GET
和目标地址一行 - 只能承载
HTML
文档
- 只有
-
HTTP/1.0-
构建可扩展性
- 增加了
Header
和状态码 - 可以支持多种文档
- ……
- 增加了
-
HTTP/1.1-
标准化协议
- 链接复用
- 缓存
- 内容协商
- ……
-
HTTP/2-
更优异的表现
- 二进制协议
- 压缩
header
- 服务器推送
- ……
帧:
HTTP/2
通信的最小单位,每个帧都包含帧头,至少也会识别出当前帧所属的数据流消息:与逻辑请求或响应消息对应的完整的一系列帧
数据流:已建立的连接内的双向字节流,可以承载一条或多条消息
交错发送,接收方重组织
HTTP/2
连接都是永久的,而且仅需要每个来源一个连接流控制:阻止发送方向接收方发送大量数据的机制
-
HTTP/3-
草案
报文
Method
GET | 请求一个指定资源的表示形式,使用GET 请求应该只被用于获取数据 |
---|---|
POST | 用于将实体提交到指定的资源,通常导致服务器上的状态变化或副作用 |
PUT | 用请求有效载荷替换目标资源的所有当前表示 |
DELETE | 删除指定的资源 |
HEAD | 请求一个与GET 请求的响应相同的响应,但没有响应体 |
CONNECT | 建立一个到由目标资源标识的服务器的隧道 |
OPTIONS | 用于描述目标资源的通信选项 |
TRACE | 沿着目标资源的路径执行一个消息环回测试 |
PATCH | 用于对资源应用部分修改 |
特性
Safe
:不会修改服务器的数据的方法,如GET
,HEAD
,OPTIONS
Idempotent(幂等)
:同样的请求被执行一次与连续执行多次的效果是一样的,服务器的状态也是一样的,所有safe
的方法都是幂等的,如GET
,HEAD
,OPTIONS
,PUT
,DELETE
状态码
用三位数字来表示,开头从1~5
,不同的开头有不同的含义
-
1XX
:指示信息,表示请求已接收,继续处理,一般很少见 -
2XX
:成功,表示请求已被成功接收、理解、接受200 OK
—客户端请求成功
-
3XX
:重定向,要完成请求必须进行更进一步的操作301
—资源(网页等)被永久转移到其它URL302
—临时跳转
-
4XX
:客户端错误,请求有语法错误或请求无法实现401 Unauthorized
—请求未经授权404
—请求资源不存在,可能是输入了错误的URL
-
5XX
:服务器端错误,服务器未能实现合法的请求500
—服务器内部发生了不可预期的错误504 Gateway Timeout
—网关或者代理的服务器无法在规定的时间内获得想要的响应
RESTful APL
RESTful APL
:一种API设计风格
REST
—Representational State Transfer
设计规则
- 每个URI代表一种资源
- 客户端和服务器之间,传递这种资源的某种表现层
- 客户端通过
HTTP method
,对服务器端资源进行操作,实现“表现层状态转化”
请求 | 返回码 | 含义 |
---|---|---|
GET/zoos | 200 OK | 列出所有动物园,服务器成功返回了 |
POST/zoos | 201 CREATED | 新建一个动物园,服务器创建成功 |
PUT/zoos/ID | 400 INVALID REQUEST | 更新某个指定动物园的信息(提供该动物园的全部信息) 用户发出的请求有错误,服务器没有进行新建或修改数据的操作 |
DELETE/zoos/ID | 204 NO CONTENT | 删除某个动物园,删除数据成功 |
常用请求头
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 | 服务端返回的实体内容的类型 |
---|---|
Cahe-Control | 指定请求和响应遵循的缓存机制,如no-cache |
Last-Modified | 请求资源的最后修改时间 |
Expires | 应该在什么时候认为文档已经过期,从而不再缓存它 |
Max-age | 客户端的本地资源应该缓存多少秒,开启了Cache-Control 后有效 |
ETag | 资源的特定版本的标识符,Etags 类似于指纹 |
Set-Cookie | 设置和页面关联的cookie ,服务器通过这个头部把cookie 传给客户端 |
Server | 服务器的一些相关信息 |
Access-Control-Allow-Orgin | 服务器允许的请求Origin 头部(譬如为* ) |
缓存
-
强缓存
-
Expires
,时间戳 -
Cache-Control
-
可缓存性
no-cache
:协商缓存验证no-store
:不使用任何缓存
-
到期
max-age
:单位是秒,存储的最大周期,相对于请求的时间
-
重新验证*重新加载
must-revalidate
:一旦资源过期,在成功向原始服务器验证之前,不能使用
-
-
-
协商缓存
Etag/If-None-Match
:资源的特定版本的标识符,类似于指纹Last-Modified/If-Modified-Since
:最后修改时间
cookie
Set-Cookie-response
Name=value | 各种cookie 的名称和值 |
||
---|---|---|---|
Expires=Date | Cookie 的有效期,缺省时Cookie 仅在浏览器关闭之前有效 |
||
Path=Path | 限制指定Cookie 的发送范围的文件目录,默认为当前 |
||
Domain=domain | 限制cookie 生效的域名,默认创建cookie 的服务 |
||
secure | 仅在HTTP 安全连接时,才可以发送Cookie |
||
HttpOnly | JavaScript 脚本无法获得Cookie |
||
SameSite=[None | Strict | Lax] | None 同站、跨站请求都可以发送 Strict 仅在同站发送 允许与顶级导航一起发送,并将与第三方网站发起的GET 请求一起发送 |
场景分析
2.1 静态资源
今日头条
-
打开
chrome
-
打开网站链接
-
打开控制台
- 右键 → 检查
- F12
-
切换至
network(网络)
状态码200也不一定就发起了请求
-
缓存策略
- 强缓存
Cache-control
:一年
-
允许所有域名访问
-
资源类型:CSS
静态资源方案:缓存 CDN 文件名hash
CDN:Content Delivery Network
通过用户就近性和服务器负载的判断,CDN确保内容以一种极为高效的方式为用户的请求提供服务
2.2 登录
业务场景
- 表单登录
- 扫码登录
技术方式:SSO
- 账号密码登录
- 打开控制台 →
network
→ 勾选preserve log
→ 过滤quick_login
- 观察请求
跨域,cross-origin
导致了options
的请求
流程
-
向什么地址做了上面动作
- 使用
POST
方法 - 目标域名sso.toutiao.com
- 目标
path/quick_login/v2/
- 使用
-
携带了哪些信息,返回了哪些信息
-
携带信息
Post body
,数据格式为form
- 希望获取的数据格式为
json
- 已有的
cookie
-
返回信息
- 数据格式
json
- 种
cookie
的信息
- 数据格式
-
“same-origin” “cross-origin”
-
CORS(Cross-Origin Resource 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
跨域解决方案
-
代理服务器
同源策略是浏览器的安全策略,不是HTTP的
-
Iframe
诸多不便
鉴权
SSO-单点登录(Single Sign On)
实战
3.1 浏览器篇
AJAX之XHR
XHR:XMLHttpRequest
readyState
0 | UNSENT | 代理被创建,但尚未调用open() 方法 |
---|---|---|
1 | OPENED | open() 方法已经被调用 |
2 | HEADERS_RECEIVED | send() 方法已经被调用,并且头部和状态已经可获得 |
3 | LOADING | 下载中;responseText 属性已经包含部分数据 |
4 | DONE | 下载操作已完成 |
AJAX之Fetch
- XMLHttpRequet的升级版
- 使用Promise
- 模块化设计,Response,Request,Header对象
- 通过数据流处理对象,支持分块读取
3.2 node篇
标准库:HTTP/HTTPS
- 默认模块,无需安装其他依赖
- 功能有限/不是十分友好
常用的请求库:axios
- 支持浏览器、
nodejs
环境 - 丰富的拦截器
3.3 用户体验
网络优化
CDN开启H2的性能会更好
预解析、预连接
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
稳定性
- 重试是保证稳定的有效手段,但要防止加剧恶劣情况
- 缓存合理使用,作为最后一道防线
3.4 扩展
通信方式
WebSocket
- 浏览器与服务器进行全双工通讯的网络技术
- 典型场景:实时性要求高,例如聊天室
- URL使用
ws://
或wss://
等开头
QUIC(Quick UDP Internet Connection)
0-RTT
建联(首次建联除外)- 类似TCP的可靠传输
- 类似TLS的加密传输,支持完美前向安全
- 用户空间的拥塞控制,最新的BBR算法
- 支持h2的基于流的多路复用,但没有TCP的HOL问题
- 前向纠错FEC
- 类似MPTCP的
Connection migration
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgecjai
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01