HTTP协议 | 青训营笔记

77 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

对于前端来说,平时和浏览器打交道的时间是最多的。但是我们仅仅知道能用浏览器做什么,但是却不知道它是怎么完成这个的。

甚至有些同学会认为对于前端,浏览器是不重要的。但是我要告诉你,即使知道浏览器工作原理的大致过程。对于我们性能优化和排查错误都会有很大提升。

一、初识 HTTP

  • 超文本传输协议(Hyper Text Transfer Protocol)
  • 应用层协议,基于TCP协议
  • 请求 响应
  • 简单可扩展
  • 无状态

二、协议分析

2.1 持续发展

image.png

2.2 报文解析

Method★

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

RESTful API

一种API设计风格;

  1. 每一个URI代表一种资源;
  2. 客户端和服务器之间,传递这种资源的某种表现层;
  3. 客户端通过HTTP method, 对服务器端资源进行操作,实现“表现层状态转化”。
image.png

请求头与响应头★

常用请求头

image.png

常用响应头

image.png

缓存★

image.png

读取缓存的流程图

image.png

cookie★

image.png

协议发展

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

  • 帧(frame):HTTP/2 通信是最小单位,每个帧都包含帧头,至少也会标识出当前帧所属的数据流。
  • 消息:与逻辑请求或响应消息对应的完整的一系列帧
  • 数据流:已建立的连接内的双向字节流,可以承载一条或多条消息
  • 流控制:阻止发送方向接收发送大量数据的机制
  • HTTP/2 连接都是永久的,而且仅需要每个来源一个连接

HTTPS(Hypertext Transfer Protocol Secure):经过TSL/SSL加密

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

二、场景分析

静态资源

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

为什么这种方式效率高?

  • 缓存:用户可以优先从本地读取文件,拿到的执行结果一定是快的
  • CDN:由于第一次打开页面本地没有缓存,但是也希望尽可能快,CDN通过用户就近性和服务器负载的判断,CDN确保内容以一种极为高效的方式为用户的请求提高服务
  • 文件名hash:由于用户用的是本地缓存,无法及时的获取最新文件。所以一般在文件名中加入hash,当每次文件名发生变化时hash也发生变化,文件名变了本地就会去访问最新的资源。

登录

登录鉴权两种方式

image.png

SSO单点登录

SSO单点登录(SingleSignOn,SSO),就是通过用户的一次性鉴别登录。当用户在身份认证服务器上登录一次以后,即可获得访问单点登录系统中其他关联系统和应用软件的权限,同时这种实现是不需要管理员对用户的登录状态或其他信息进行修改的,这意味着在多个应用系统中,用户只需一次登录就可以访问所有相互信任的应用系统。

image.png