前端与HTTP|青训营笔记

yeqiu
72 阅读2分钟

这是我参与 [第五届青训营] 伴学笔记创作活动的第一天，下面是我的 HTTP 学习笔记。

初识HTTP

什么是HTTP？

  • Hyper Text Transfer Protocol（超文本传输协议）
  • 应用层协议，基于 TCP 协议
  • 请求响应
  • 简单可扩展
  • 无状态
1.PNG

协议分析

报文

Method

GET, POST, PUT, DELETE, HEAD, CONNECT, OPTIONS, TARCE, PATCH

  • Safe: 不会修改服务器数据的方法（GET, HEAD, OPTIONS）
  • Idempotent（幂等）：同样的请求执行一次与执行多次的效果是一样的，服务器的状态也是一样的（GET, HEAD, OPTIONS, PUT, DELETE）

状态码

  • 1xx：提示信息，表示请求已接受，继续处理
  • 2xx：成功，表示请求已被成功接收、理解、接受
  • 3xx：重定向，要完成请求必须进行更进一步的操作
  • 4xx：客户端错误，请求语法错误或请求无法实现
  • 5xx：服务器错误，未能实现合法的请求

RESTful API

一种 API 设计风格，即 Representailonal State Transfer

（1）每一个 URI 代表一种资源

（2）客户端和服务器之间，传递这种资源的某种表现层

（3）客户端通过 HTTP method，对服务器端资源进行操作，实现“表现层状态转化”

常用请求头

2.PNG

常用响应头

3.PNG

缓存

  1. 强缓存

    • Expires：时间戳
    • Cache-Control

  2. 协商缓存

    • Etag/If-None-Match：资源特定版本的标识符
    • Last-Modified/If-Modified-Since：最后修改的时间

4.PNG

发展

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

  • 帧（frame）：HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。
  • 交错发送，接收方重组织
  • HTTP/2连接是永久的，而且仅需要每个来源一个连接
  • 流控制：阻止发送方向接收方发送大量数据的机制

HTTPS

  • Hypertext Transfer Protocol Secure
  • 经过 TSL/SSL 加密

场景分析

静态资源

方案：缓存+CDN+文件名hash

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

5.PNG

登陆

  1. 为什么下一次进入页面可以记住登录态？

鉴权

  • session+cookie
  • JWT(json web token)
  1. 为什么点击发文章跳转的网站也可以自动登录？
  • SSO: 单点登陆(single Sign On)

实战

常用库

  • AJAX-XHR: XMLHttpRequest
  • AJAX-Fetch
  • 标准库：HTTP/HTTPS
  • 常用请求库：axios

用户体验

  • 网络优化
  • 稳定性
avatar
文章
阅读
粉丝