本篇文章侧重于前端计算机网络的应用，如果需要了解更详细的计算机网络五层结构，可见计算机网络基础

GET和POST请求的区别

GET和POST请求是前端请求中最常见的方法，其区别在于：

  1. 缓存方面：GET请求可被浏览器缓存，POST请求通常不被缓存
  2. 参数携带方面：GET请求通过查询参数传递参数，需要在url中携带，如?xxx=xxx，POST请求将参数包含在请求体中
  3. 数据透明性：查询传参的方式造成了GET请求的参数是透明的而POST请求的参数是不透明的

这些差别使得两者的使用场景有所差别，GET适用于一些不需要特地保护数据隐私的场合而POST适用于相对敏感的数据操作场景，如表单提交等。并且，GET请求通常不涉及对服务端资源的修改而POST请求往往包含可能修改服务端资源的信息

POST和PUT请求的区别

POST和PUT请求本质上都涉及对数据的修改，但POST请求是非等幂请求（可能会改变数据种类或新增数据之类的请求），而PUT是等幂请求（不会改变数据种类，只对现有数据进行修改），因此，多个POST请求可能会创建多份资源而PUT请求只会创建一个资源

顺带一提，GET也是非等幂请求

常见的HTTP请求头和响应头

先来回顾一下HTTP请求与响应的结构吧，以请求为例，一个请求结构中包含：

  • 请求行：包括请求URL，请求方法，状态码，远程服务器地址，http版本等
  • 请求头：包括请求的相关信息
  • 请求体：请求中携带的具体数据

其中请求行和请求体没什么可说的，一个记录宏观信息，一个携带具体内容，下面主要来讲一讲常见请求头和响应头

  • Accept:浏览器能够处理的内容类型
  • Accept-Charset:浏览器能够显示的字符集
  • Accept-Encoding：浏览器能够处理的压缩编码
  • Accept-Language：浏览器当前设置的语言
  • Connection：浏览器与服务器之间连接的类型
  • Cookie：当前页面设置的任何Cookie
  • Host：发出请求的页面所在的域
  • Referer：发出请求的页面的URL
  • User-Agent：描述客户端的信息
  • Date：表示消息发送的时间，时间的描述格式由rfc822定义
  • server:服务器名称
  • Connection：浏览器与服务器之间连接的类型
  • Cache-Control：控制HTTP缓存行为
  • Content-Length：响应数据长度
  • content-type:指定返回的数据类型
  • Set-Cookie：用于在客户端设置Cookie

状态码304的含义

在HTTP协议的状态码中，3XX开头一般表示重定向相关操作，但304 Not Modified表示的是条件请求，其核心在于，服务器会优先根据缓存对该请求内容进行判断，如果两次请求内容相同，则直接调用缓存的资源，从而优化性能，提高浏览器访问速度

304状态码的利弊：

  • 304的优势在于直接调取本地缓存资源，从而提升访问速度
  • 其劣势在于由于浏览器搜索引擎会根据网站更新频率提高其权重，所以大量304会导致网站访问的优先级降低

304状态码和200状态码的区别

  • 304返回的是本地缓存的资源，只有响应头，没有响应体部分
  • 200则会返回包含完整内容的响应资源

常见的状态码一览

1XX状态码返回一些请求信息：

  • 100 Continue：服务器已接收到请求的一部分，客户端可继续发送
  • 101 Switching Protocols：服务器同意切换协议，如从 HTTP/1.1 切换到 WebSocket

2XX状态码表示请求成功：

  • 200 OK：请求成功，服务器已返回数据。
  • 201 Created：资源已成功创建（例如 POST 请求创建新资源）
  • 204 No Content：请求成功但没有返回任何内容

3XX状态码表示页面或资源已被重定向：

  • 301 Moved Permanently：资源永久移动到新位置
  • 302 Found：资源临时移动，新地址在响应头中提供
  • 304 Not Modified：资源未修改，可以从缓存中使用

4XX状态码表示客户端错误：

  • 400 Bad Request：请求语法错误或无效
  • 401 Unauthorized：请求需要用户认证
  • 403 Forbidden：服务器拒绝访问（例如无权限）
  • 404 Not Found：服务器找不到请求的资源
  • 405 Method Not Allowed：请求方法（如 GET/POST）对资源不适用

5XX状态码表示服务端错误：

  • 500 Internal Server Error：服务器发生未知错误。
  • 502 Bad Gateway：服务器作为网关时收到无效响应。
  • 503 Service Unavailable：服务器暂时不可用（如过载或维护中）。
  • 504 Gateway Timeout：服务器作为网关时未收到及时响应。

HTTP/1.0和HTTP/1.1之间的区别

HTTP/1.0：采用非持久连接，每次请求时都会创建一个独立的TCP连接，请求结束后立即关闭连接，无法复用连接，导致延迟较大
HTTP/1.1新增特性：

  • 持久连接：默认采用持久连接connection：keep-alive
  • 管线化：支持在同一个连接内发送多个请求，无需等待前一个请求完成
  • 增强缓存机制：新增了更复杂的缓存机制
  • 增加请求方法：新增了诸如PUT、DELETE等请求方法
  • 新增了host字段：指定服务器的域名，解决虚拟主机技术相关问题

HTTP/1.1到HTTP/2.0做了哪些优化

  • 二进制协议：与HTTP/1.X版本不同，HTTP/2.0完全采用二进制数据进行传输，提高了数据解析效率
  • 多路复用：HTTP/2.0仍然采用管线化机制，即在同一个连接里发送多个请求，但HTTP/2.0可以同时发送和接收多个请求，从而解决了队头堵塞的问题
  • 数据流化与优先级策略：HTTP/2.0采用数据流的概念，由于HTTP/2.0的数据包不是按顺序发送的，所以对数据包进行标记，从而确定其所属的请求，同时还可以通过标记指定数据流的优先级
  • 头部压缩：压缩一些需要反复发送的头部资源，从而节省网络传输体积
  • 服务器推送：服务器可以主动向客户端推送一些资源，而无需等待请求

输入网址URL之后，浏览器中发生了什么

  1. URL解析：浏览器解析URL，提取其中的协议，域名，端口等信息
  2. DNS解析：浏览器会根据输入URL对域名进行解析，从顶级域名到最低级域名逐层找到目标URL对应的服务器
  3. 建立TCP连接：通过DNS找到服务器后，建立TCP连接，准备数据发送
  4. 发送http请求：发送http请求，请求页面内容
  5. 解析响应内容：浏览器解析http响应的值，构建DOM树
  6. 页面渲染：按照返回的响应值和DOM树，浏览器将内容渲染到页面上