关于HTTP | 青训营笔记

用户5933253920626
134 阅读5分钟

关于HTTP | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天，今天学习的内容是HTTP。

什么是HTTP

普通人访问网站的流程如：

1659525996230.png HTTP全称超文本传输协议，处于网络的应用层，为前端的数据信息交流做出了贡献 它具有如下特性：

  • 请求响应
  • 简单可扩展性
  • 无状态

协议分析

HTTP的发展流程： image.png

报文分析：

http的请求报文由：请求行、头部、空行、主体(请求数据)四个部分组成。其中请求行由请求方法字段、URL字段和HTTP协议版本字段3个字段组成，它们用空格分隔。常见的报文类型如下： ff933c3e49a35645b3bba9ad119ab52.jpg

请求行类型

Safe(安全的)：不会修改服务器数据的方法

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

状态码

状态码前缀的语法含义 image.png 生活中常见的状态码：

  • 200 OK 客户端请求成功
  • 301 资源(网页)被永久转到其他URL
  • 302 临时跳转
  • 401 未授权
  • 404 请求资源不存在或找不到，可能和错误URL有关
  • 403 被静止
  • 500 服务器内部发生了错误
  • 504 网关或服务器无法在规定的时间内获得想要的响应

常用请求头

  • Accept：指定客户端能够接收的内容类型，表示浏览器支持的MIME类型。
  • Content-Type：客户端发送出去的实体内容的类型
  • Cache-Control：指定请求和响应遵循的缓存机制。
  • if-Modified-Since: 对应服务端的Last-Modified，用来匹配观察文件是否变动（精确到1s之内）
  • Expires：缓存控制，在这个时间内不会请求，直接使用缓存
  • Max-age：代表资源在本地缓存多少秒，有效时间内不会请求而是使用缓存
  • Max-Forwards：限制信息通过代理和网关传送的时间。
  • Connection：表示是否需要持久连接。（HTTP 1.1默认进行持久连接）
  • CookieHTTP：请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。
  • Referer：改页面的来源URL（适用于所有类型的请求并精确到详细页面地址）
  • Origin：最初的请求从哪里发起（精确到端口，比Referer更加尊重隐私）
  • Date：请求发送的日期和时间。
  • Expect：请求的特定的服务器行为。
  • From：发出请求的用户的Email。
  • Host：指定请求的服务器的域名和端口号。
  • If-None-Match：如果内容未改变返回304代码，参数为服务器先前发送的Etag，与服务器回应的Etag比较判断是否改变。
  • Pragma：用来包含实现特定的指令。
  • User-Agent：用户客户端的一些必要信息，如UA头部等。

常用响应头

  • Content-Type：服务端返回内容的MIME类型。
  • Cache-Control：指定请求和响应遵循的缓存机制。
  • Last-Modified：请求资源的最后修改时间。
  • Expires：响应过期的日期和时间。
  • Max-age：客户端的本地资源应该缓存多少秒，开启Cache-Control后有效
  • ETag：请求变量的实体标签的当前值。
  • Set-Cookie：设置和页面相关的Cookie。通过这个头吧cookie传给客户端
  • Server：服务器的相关信息
  • Access-Control-Allow-Origin：服务器端允许的请求Origun头部
  • Pragma：包括实现特定的指令，它可应用到响应链上的任何接收方。
  • Proxy-Authenticate：它指出认证方案和可应用到代理的该URL上的参数。
  • refresh：应用于重定向或一个新的资源被创造，在5秒之后重定向（由网景提出，被大部分浏览器支持）
  • Retry-After：如果实体暂时不可取，通知客户端在指定时间之后再次尝试。
  • Serverweb：服务器软件名称。
  • Location：用来重定向接收方到非请求URL的位置来完成请求或标识新的资源。

一些概念

  • 帧：HTTP2中通信的最小单位，每个帧都包含帧头，至少也会标出当前帧所属的数据流
  • 消息：与逻辑请求或响应消息对应的一系列帧
  • 数据流：已建立的连接内的双向字节流，可以承载一至多条消息
  • 流控制：阻止发送方向向接收方发送大量数据的机制
  • 对称加密：加密和解密使用同一个密钥
  • 非对称加密：提出公钥和私钥

场景分析

  • 右键->检查/F12
  • 点击Network开始分析
  • 静态资源
  • 登录
  • 跨域问题

实际应用

静态资源：

  • 方案：缓存+CDN+文件名hash
  • CDN：通过用户就近性和服务器负载的判断，保证内容以高效的方式为用户提供服务。

跨域：

  • CORS（Cross-Origun Resource Sharing）
  • 预请求：货值服务端是否运行跨源请求
  • 代理服务器
  • iframe

鉴权方式：

  • Session+cookie
  • JWT（json web token）

不同网站自动登录：

  • SSO：单点登录

实战

AJAX---XHR

  • XHR：XMLHttpRequest
readystate：
  • UNSENT 代理被创建，但尚未调用创建open（）方法
  • OPENED open（）方法已经被调用
  • HEADERS_RECEIVED send（）方法已经被调用，并且头部和状态已经可获得
  • LOADING 下载中，responseText属性已经包含部分数据
  • DONE 下载操作已完成

- AJAX---FETCH

  • 为XMLHttpRequest的升级版
  • 使用promise
  • 模块化设计，response，request，header对象

- 标准库：

  • 常用的请求库：axios
  • 支持浏览器，nodejs环境

扩展

WebSocket

浏览器与服务器进行全双工通信，适用于聊天室等对时效要求高的网络技术 使用ws://或wss://等开头

QUIC：Quicj UDP Internet Connection

  • 类似TCP的可靠传输
  • 类似TLS的加密传输，
  • 利用最新BBR算进行拥塞控制
  • 支持基于流的多路复用，但没有TCP的HOL问题
  • 前向纠错FEC
  • 类似MPTCP的Connection migration
avatar
文章
阅读
粉丝