HTTP 实用指南 | 青训营笔记

xxxm
96 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的的第9天

1.什么是http

http是基于超文本传输协议的无状态，它位于应用层是基于tcp协议的传输。 基本的http包含了请求头和响应头两部分组成

2.http发展历程

http1以前

  • 只有简单的get和post两种请求

http1.0

  • 添加多种请求方式put,delelte update等
  • 添加了请求头字段
  • 添加了状态码

http1.1

  • 添加缓存机制
  • 添加内容协商
  • 添加链路复用：tcp建立建立后，长连接。不会四次挥手耗费性能

http2

  • 服务器推送
  • header字段压缩
  • 二进制协议

3.状态码

  • 2xx：表示成功的状态码
  • 3xx: 有关重定向和缓存的状态码
  • 4xx: 客户端发生的错误
  • 5xx: 服务端发生的错误

4. 常用请求头

accept: 判断浏览器可以接收的请求头 cache-control: 设置是否缓存的字段 origin: 判断请求的来源 use-agent: 客户端的一些重要信息

5.缓存机制

  1. 访问浏览器，浏览器判断是否有缓存，没有则请求后端服务器资源
  2. 如果有缓存，首先判断是否存在强缓存，如果有，则直接输出状态码304
  3. 如果强缓存失效，时间过期。则判断是否有弱缓存，此时弱缓存有两类。
  4. 首先判断etag是否存在，如果则判断上次服务器修改的和最新的服务器资源是否相同，如果相同，则返回状态码304.否则，重新加载服务器资源，更改etag字段
  5. etag如果不存在，则判断last-modify字段，如果这个字段，对比上次修改的时间是否和当前服务器最新的数据时间相同，如果相同，返回状态码304.否则请求后端数据

6.发起请求

AJAX之XHR (XHR: XMLHttpRequest)

AJAX之Fetch

  • XMLHttpRequest的升级版
  • 使用Promise
  • 模块化设计, Response, Request, Header对象
  • 通过数据流处理对象, 支持分块读取

标准库: HTTP/HTTPS

  • 默认模块, 无需安装其他依赖
  • 功能有效/不是十分友好

常用的请求库: axios

  • 支持浏览器, nodejs环境
  • 丰富的拦截器

7.请求方式

8.缓存

  • 强缓存
    • 两个请求头 Expires，时间戳；Cache-Control
  • 协商缓存
    • Etag/lf-None-Match :资源的特定版本的标识符，类似于指纹
    • Last-Modified/lf-Modified-Since:最后修改时间

9.HTTP/2

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

10.HTTPS

11.WebSocket

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

12.使用Http协议访问Web过程

当用户在浏览器地址栏输入URL，browser进程处理URL信息后向浏览器内核发送请求，请求经过应用层->传输层->网络层->链路层到达服务器端，相应的服务器端返回响应，浏览器内核读取响应并进行渲染，最终页面加载完成。

13.与http密不可分的三个协议:IP、TCP和DNS

  1. 负责传输的IP协议：ip（internet protocol）网际层协议，把各种数据包传送给对方，中间会涉及到跨网段传输，用到ARP技术，奖逻辑网络地址转化昵称mac地址。
  2. 确保可靠性传输的TCP协议：TCP位于传输层，提供可靠的字节流服务，TCP协议会通过三次握手建立连接。
  3. 负责域名解析的DNS服务：DNS将域名转换成IP地址。

14.常用请求头

  • Accept 接收类型，表示浏览器支持的MIME类型(对标服务端返回的Content-Type)
  • Content-Type 客户端发送出去实体内容的类型
  • Cache-Control 指定请求和响应遵循的缓存机制，如no-cache
  • lf-Modified-Since 对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内
  • Expires 缓存控制，在这个时间内不会请求，直接使用缓存,服务端时间
  • Max-age 代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
  • lf-None-Match 对应服务端的ETag，用来匹配文件内容是否改变（非常精确)
  • Cookie 有cookie并且同域访问时会自动带上
  • Referer 该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址, csrf拦截常用到这个字段)
  • Origin 最初的请求是从哪里发起的(只会精确到端口) ,Origin比Referer更尊重隐私
  • User-Agent 用户客户端的一些必要信息，如UA头部等

15.常用响应头

  • Content-Type 服务端返回的实体内容的类型
  • Cache-Control 指定请求和响应遵循的缓存机制，如no-cache
  • Last-Modified 请求资源的最后修改时间
  • Expires 应该在什么时候认为文档已经过期,从而不再缓存它
  • Max-age 客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效
  • ETag 资源的特定版本的标识符, Etags类似于指纹
  • Set-Cookie 设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端
  • Server 服务器的一些相关信息
  • Access-Control- 服务器端允许的请求Origin头部（譬如为*)
  • Allow-Origin-Allow-Origin 服务器端允许的请求Origin头部（譬如为*)
avatar
文章
阅读
粉丝