阅读 346
【青训营】HTTP实用指南——基础篇 - 基本特点 - 协议分析 - 缓存 - HTTP2 - HTTPS

【青训营】HTTP实用指南——基础篇 - 基本特点 - 协议分析 - 缓存 - HTTP2 - HTTPS

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

今天我们来学习学习前端必须要知道的计算机网络知识:HTTP相关,这部分分为两篇,基础篇和实战篇,本篇为基础篇,旨在介绍HTTP的基础知识和基本特点,一起分析一下HTTP报文结构,最后再聊聊HTTP2和HTTPS

本文整体结构采用青训营上课视频+课件,补充了很多内容整合自 《HTTP权威指南》 + 《图解HTTP》 + 技术博文

初识HTTP

背景知识

面试经典题:从在浏览器中输入url到网页呈现,这中间发生了什么?

image.png

下面我们来简单介绍一下

青训营13-HTTP实用指南.jpg

如图所示,

  1. 用户在地址栏输入内容,浏览器内核处理输入信息,不管输入的是不是url,最终都会转换成url地址
  2. 然后浏览器内核会向这个url地址发起一个请求
  3. 进入网络
  4. 服务器端会给出响应
  5. 浏览器内核会读取响应
  6. 浏览器内核将响应拿到的数据(一般是HTML)进行渲染
  7. 最后页面就加载完成了

今天我们主要探索一下网络相关的知识

image.png

计算机网络的分层模型 有 OSI七层参考模型TCP/IP四层参考模型,今天我们主要探索应用层中的HTTP协议

image.png

概念&特点

HTTP 全称 Hyper Text Transfer Protocol 超文本传输协议

Web浏览器、服务器和相关的Web应用程序都是通过HTTP相互通信的。

image.png

  • 应用层协议,基于TCP协议

也就是说HTTP使用的是可靠的数据传输协议,用户在访问信息时不用担心数据在传输过程中被损坏或者产生混乱~

image.png

  • 支持客户/服务器模式,请求+响应

客户向服务器请求服务时,只需传送请求方法和路径

请求

image.png

响应

image.png

  • 简单可扩展

HTTP允许传输任意类型的数据对象 请求头信息可以自定义拓展

  • 无连接

无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。

  • 无状态

无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

协议分析

发展历程

  • HTTP/0.9 1990年
  • HTTP/1.0 1996年5月
  • HTTP/1.1 1997年1月 是目前主流的HTTP协议版本

image.png

报文

HTTP报文是在HTTP应用程序之间发送的数据块。这些数据块以一些文本形式的元信息(meta-information)开头,这些信息描述了报文的内容及含义,后面跟着可选的数据部分。

image.png

我们来简单看一下请求和响应报文

image.png

HTTP报文可以分为四个部分:

  1. 起始行:请求(Method Path Version)、响应(Version StatusCode StatusMessage)
  2. HTTP Headers:请求头、响应头
  3. 空行
  4. body:请求体、响应体

image.png

image.png

下面我们来仔细分析下这些报文

Method

请求报文的起始行的第一个就是 HTTP协议中的请求方法,是客户端希望服务器对资源执行的动作,下面来看看这些请求方法都是什么含义

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

分类

  • 安全Safe:不会修改服务器的数据的方法:GET HEAD OPTIONS
  • 幂等Idempontent:同样的请求被执行一次与连续执行多次的效果时一样的,服务器的状态也是一样的,所有safe的方法都是idempotent的:GET HEAD OPTIONS PUT DELETE

状态码

响应报文的起始行中显示响应状态码,我们来看看这些状态码都有什么含义

image.png

常见状态码及含义

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

更多内容可以看 【HTTP】HTTP状态码-返回结果-2XX-3XX-4XX-5XX

【补充】RESTful API

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

  1. 每一个URI代表一种资源;
  2. 客户端和服务器之间,传递这种资源的某种表现层;
  3. 客户端通过HTTP method,对服务器端资源进行操作,实现"表现层状态转化"。
请求返回码含义
GET /zoos200 OK列出所有动物园,服务器成功返回了
POST /zoos201 CREATED新建一个动物园,服务器创建成功
PUT /zoos/ID400 INVALID REQUEST更新某个指定动物园的信息(提供该动物园的全部信息)用户发出的请求有错误,服务器没有进行新建或修改数据的操作
DELETE /zoos/ID204 NO CONTENT删除某个动物园,删除数据成功

传统API与RESTful API的区别

  • 传统API:把每个URL当作一个功能
  • Restful API: 把每个URL当作一个唯一的资源

用 URL 定位资源,用 HTTP 动词(GET,POST,DELETE,PUT)描述操作,尽量不用URL参数,用method表示操作类型

① url参数

  • 传统API :/api/list?pageIndex=2
  • Restful API :/api/list/2

② method表示操作类型

传统API

  • POST请求 /api/create-blog
  • POST请求 /api/update-blog?id=100
  • GET请求 /api/get-blog?id=100

Restful API

  • POST请求 /api/blog

  • PATCH请求 /api/blog/100

  • GET请求 /api/blog/100

请求头

Header首部和请求方法配合工作,共同决定了客户端和服务器能做什么事情。

请求头说明
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头部(譬如为*)

缓存

和缓存相关的协议首部Header

image.png

强制缓存

image.png

Cache-Control (Response Headers)

  • max-age 设置缓存有效时间
  • no-cache 不用本地强制缓存,让服务端处理缓存
  • no-store 不强制缓存,不让服务端处理缓存,直接返回资源
  • private 只能允许最终用户做缓存
  • public 允许中间路由、代理做缓存

Expires (Response Headers) 控制缓存过期,已被Cache-Control代替

协商缓存

服务端缓存策略

服务端判读客户端资源,是否和服务端资源一样

一致返回304,否则返回200和最新的资源 image.png Last-Modified [资源标识] 资源最后修改时间

image.png Etag [资源标识] 资源唯一标识(一个字符串,类似人类的指纹) image.png

最后来看看浏览器发送请求使用缓存的整体流程

image.png

cookie

前面说过HTTP是无状态的协议,如何让他保持状态呢?就需要设置我们的cookie

Set-Cookie - response

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

HTTP2

更快、更稳定、更简单

可以去这个网站测试一下 HTTP/1.1HTTP/2 的比较 http2.akamai.com/demo ,这个是一个加载379张图片的demo

image.png

基本概念

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

HTTP2性能提升的核心就在于二进制分帧层。HTTP2是二进制协议,他采用二进制格式传输数据而不是1.x的文本格式。

image.png

1.1响应是文本格式,而2.0把响应划分成了两个帧,HEADERS(首部)和 DATA(消息负载) 是帧的类型。

一条HTTP响应,划分成了两个帧来传输,并且采用二进制来编码

  • 消息(Message): 与逻辑请求或响应消息对应的完整的一系列帧。特定消息的帧在同一个流上发送,这意味着一个HTTP请求或响应只能在一个流上发送。

  • 数据流(Frame): 已建立的TCP连接内的双向字节流,可以承载一条或多条消息

多路复用

交错发送,接收方重组织

HTTP2建立一个TCP连接,一个连接上面可以有任意多个流(stream),消息分割成一个或多个帧在流里面传输。帧传输过去以后,再进行重组,形成一个完整的请求或响应。这使得所有的请求或响应都无法阻塞。

image.png

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

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

服务器推送

服务器端推送使得服务器可以预测客户端需要的资源,主动推送到客户端。

image.png

HTTPS

HTTPS:Hypertext Transfer Protocol Secure

关于HTTPS相关的知识,我们在《Web开发安全之旅-防御篇》就已经聊过了,今天就再补充几点~ 可以结合这看看~

相当于在HTTP和TCP之间经过TSL/SSL加密

image.png

我们来看看两种加密方式的区别

  • 对称加密:加密和解密都是使用同一个密钥
  • 非对称加密:加密和解密需要使用两个不同的密钥:公钥(public key)和私钥(private key)

然后呢,掘金上的这个博文也说的特别好 《大前端进阶 安全》系列 HTTPS详解(通俗易懂) 可以看看~ 因为我看老师PPT上的下面这张图就是出这里的~

image.png

参考

文章分类
前端
文章标签