前端青训营-理论篇-HTTP实用指南 | 豆包MarsCode AI 刷题

11 阅读3分钟

初识

从输入URL到页面展示,过程中发生了什么?

img

HTTP协议是位于应用层的

img

HTTP(Hyper Text Transfer Protocol),即超文本传输协议。

其应用层协议是基于TCP协议的。

它包含请求和响应,简单可拓展,无状态。

img

协议分析

发展过程

img

报文格式

img

Method

img

img

状态码

img

RESTful API

是一种API设计风格;REST-Representational State Transfer ;其设计风格包括:

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

img

常用请求头

img

常用响应头

img

缓存

强缓存:本地有且未过期就不更新

协商缓存:需要通信校验一下,数据没更改就不更新

img

img

cookie

img

HTTP/2

特点:更快、更稳定、更简单

帧(frame)是HTTP/2通信的最小单位,会把每个message划分成若干个帧,每个帧都包含帧头,至少也会标识出当前帧所属的数据流。传输过程中不再采用纯文本,而是使用了二进制编码,提高了传输效率。

img

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

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

帧是可以交错发送的,他里面带了标记信息,可以由接收方重组织。

img

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

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

HTTP/2可以实现服务器的推送(需要浏览器能力的支持)(目前使用较少)

img

HTTPS

HTTPS即Hypertext Transfer Protocol Secure,传输的数据经过TSL/SSL加密(对称和非对称加密都有)

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

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

img

场景分析

静态资源

这个数据是从缓存里面得到的。

img

img

静态资源方案:缓存+CDN(够快)+文件名hash(够新)

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

img

登录

这里的请求方式是OPTIONS,说明它是一个跨域的请求。

img

只要协议、域名(含子域)、端口号任一不同,都是跨域。(HTTPS默认用443端口号,HTTP默认用80端口号)

img

解决跨域问题方案一:用跨域资源共享

img

解决跨域问题方案二:用代理服务器

img

分析这个登录请求

img

img

img

SSO(Single Sign On):单点登录,实现调整后的网站保持登录状态

img

实际应用

AJAX之XHR

img

AJAX之Fetch

img

Node-HTTP/HTTPS

img

Axios

更好的判断当前请求的环境(浏览器、API),并且有拦截器这些语法糖便于请求发送。

img

体验优化

img

img

了解更多

WebSocket

  • 浏览器与服务器进行全双工通讯的网络技术
  • 典型场景:实时性要求高,例如聊天室
  • URL使用ws:/或wss:/等开头

img

QUIC: Quick UDP Internet Connection

是基于UDP封装的一种新版本的协议(研究阶段)。

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

img

img