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

初识HTTP

什么是HTTp

Hyper Text Transfer Protocol超文本传输协议

应用层协议，基于TCP协议

请求响应

简单可扩展

无状态

每个HTTP分为请求和相应两部分

协议分析

协议发展

HTTP/1.1报文

method

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

Safe (安全的)︰不会修改服务器的数据的方法（GET HEAD OPTIONS）

ldempotent(幂等)︰同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的所有safe的方法都是ldempotent的（GET HEAD OPTIONS PUT DELETE）

状态码

200 OK -客户端请求成功

301 -资源〈网页等）被永久转移到其它URL302-临时跳转

401 Unauthorized -请求未经授权

404 -请求资源不存在，可能是输入了错误的URL

500 -服务器内部发生了不可预期的错误

504 Gateway Timeout-网关或者代理的服务器无法在规定的时间内获得想要的响应。

RESTful API

RESTful API :一种API设计风格;REST - Representational State Transfer

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

常用请求头

Accept 接收类型，表示浏览器支持的MIME类型(对标服务端返回的Content-Type)
Content-Type 客户端发送出去实体内容的类型
Cache-Control 指定请求和响应遵循的缓存机制，如no-cache
lf-Modified- 对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内 Since
Expires 缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间
Max-age 代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
lf-None-Match 对应服务端的ETag，用来匹配文件内容是否改变（非常精确)
cookie 有cookie并且同域访问时会自动带上
Referer 该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址, csrf拦截常用到这个字段)
origin 最初的请求是从哪里发起的(只会精确到端口） ,Origin比Referer更尊重隐私
User-Agent 用户客户端的一些必要信息，如UA头部等（安卓、pc……）

常用响应头

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/lf-None-Match :资源的特定版本的标识符，类似于指纹
Last-Modified/lf-Modified-Since:最后修改时间

缓存过程

cookie

Set-Cookie - response

Name=value ：各种cookie的名称和值
Expires=Date： Cookie的有效期,缺省时Cookie仅在浏览器关闭之前有效。
Path=Path ：限制指定Cookie的发送范围的文件目录，默认为当前
Domain=domain ：限制cookie生效的域名，默认为创建cookie的服务域名
secure：仅在HTTPS安全连接时,才可以发送Cookie
HttpOnly ： JavaScript 脚本无法获得Cookie
SameSite=[None|Strict|Lax] ：
1. None同站、跨站请求都可发送
2. Strict 仅在同站发送
3. 允许与顶级导航—起发送,并将与第三方网站发起的GET请求一起发送

发展

HTTP/2概述:更快、更稳定、更简单

帧(frame) : HTTP/2通信的最小单位,每个帧都包含帧头，至少也会标识出当前帧所属的数据流。

二进制

消息:与逻辑请求或响应消息对应的完整的一系列帧。

数据流:已建立的连接内的双向字节流.可以承载一条或多条消息。

交错发送,接收方重组织

HTTP/2连接都是永久的,而且仅需要每个来源一个连接

流控制:阻止发送方向接收方发送大量数据的机制

服务推送

HTTPS

HTTPS : Hypertext TransferProtocol Secure

经过TSL/SSL加密

对称加密︰加密和解密都是使用同一个密钥

非对称加密，加密和解密需要使用两个不同的密钥︰公钥(public key)和私钥(private key)

场景分析

Status Code:200(from disk cache)，从本地缓存拿到的相应，没有真是经过网络链路。

静态资源

本地响应拿缓存缓存策略是怎样的?

强缓存

Cache-control :一年

还有什么信息吗?

允许所有域名访问·资源类型:css

静态资源部署

静态资源方案︰缓存+CDN＋文件名hash

CDN : Content DeliveryNetwork

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

cdn原理图

实战

浏览器篇（ajax）

AJAX之XHR

XHR: XMLHttpRequest

readyState（四个阶段）

1. UNSENT： 代理被创建，但尚未调用open()方法。
2. OPENED： open()方法已经被调用。
3. HEADERS_RECEIVED： send(方法已经被调用.并且头部和状态已经可获得。
4. LOADING： 下载中; responseText 属性已经包含部分数据。
5. DONE： 下载操作已完成。

AJAX之Fetch

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

node篇

标准库:HTTP/HTTPS

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

常用的请求库:axios

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

网络优化

CDN是否开启H2的性能对比数据参考

//预解析、预链接
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href=" // cdn.example.com" crossorigin>

稳定性

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

扩展

通信方式

webSocket

浏览器与服务器进行全双工通讯的网络技术

典型场景︰实时性要求高，例如聊天室URL使用ws://或wss://等开头

webSocket双向通信，延时小

传输层

QuIC

Quick UDP Internet Connection

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

HTTP实用指南 | 青训营笔记