HTTP一篇说清楚~拿走

大布布将军
172 阅读4分钟

常常看，常常想，HTTP 不仅仅是发起一个 fetch 或 axios 请求。然后大多数情况下，这些基础理论就被丢到一边了，在实际开发中，我们每天都在用，但是无感知，所以我想总结一下，归纳一下，大家点赞直接拿走🌹🌹🌹

HTTP知识点大全

  1. HTTP 概念
  2. HTTP请求/响应结构
  3. HTTP方法
  4. HTTP状态码
  5. HTTP版本
  6. 浏览器缓存
  7. 跨域
  8. 安全
  9. 优化

HTTP 概念

超文本传输协议，是一个用于传输超媒体文档（如 HTML）的应用层协议。超文本传输协议是一种用于分布式、协作式和超媒体信息系统的应用层协议，是万维网WWW（World Wide Web）的数据通信的基础

我们在浏览器的地址栏里输入URL (Uniform Resource Locator，统一资源定位符)时，就像输入一个门牌地址一样，每个网页也都有一个Internet地址。在浏览器的地址框中输入一个URL或是单击一个超级链接时，也就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的文件提取出来，并在网页上渲染。因此，在我们认识HTTP之前，有必要先弄清楚URL的组成,例如：(www.baidu.com/)http://www…

  1. http://：代表超文本传输协议，通知baidu.com服务器显示Web页，通常不用输入；

  2. www：代表一个Web（万维网）服务器；

  3. baidu.com/：这是装有网页的服务器的域名，或站点服务器的名称；

  4. China/：为该服务器上的子目录，就好像我们的文件夹；

  5. Index.htm：是当前选择文件夹中的一个HTML文件（网页文件）。(www.baidu.com/china/index…)

HTTP请求/响应结构

请求报文 GET /api/user HTTP/1.1 // 请求行：方法 + URL + 协议版本 Host: api.example.com // 请求头 User-Agent: Mozilla/5.0... Accept: application/json (空行) (请求体，GET 请求通常没有) 响应报文

HTTP/1.1 200 OK                 // 状态行：版本 + 状态码 + 状态文本
Content-Type: application/json  // 响应头
Cache-Control: max-age=3600
(空行)
{"name": "John", "id": 1}       // 响应体

HTTP方法

  • GET：获取资源，幂等，安全，可缓存。
  • POST：提交数据，处理数据，非幂等（多次提交可能产生不同结果），不安全。
  • PUT：替换整个资源，幂等。
  • PATCH：部分更新资源，非幂等。
  • DELETE：删除资源，幂等。
  • OPTIONS：预检请求，用于 CORS。
  • HEAD：只获取响应头。

HTTP状态码

  • 1xx：信息性状态码（如 101 Switching Protocols，用于 WebSocket）。
  • 2xx：成功
  • 3xx：重定向
  • 4xx：客户端错误
  • 5xx：服务器错误

1762250525778.jpg

HTTP版本

  • HTTP/1.0：每个请求一个TCP连接。
  • HTTP/1.1：持久连接、管道化、Host头，一个 TCP 连接上同时进行多个请求/响应，彻底解决 HTTP/1.1 的队头阻塞。
  • HTTP/2：二进制分帧、多路复用、头部压缩、服务器推送。
    • 二进制分帧：将报文分解为更小的帧，并行交错发送。
    • 多路复用：一个 TCP 连接上同时进行多个请求/响应，彻底解决 HTTP/1.1 的队头阻塞。
    • 头部压缩：使用 HPACK 算法压缩头部，减少开销。
    • 服务器推送：服务器可以主动向客户端推送资源。
  • HTTP/3：基于QUIC（UDP），解决队头阻塞。

浏览器缓存

强缓存

  • Expires：绝对时间，HTTP/1.0，短连接，每个请求/响应都建立一个新 TCP 连接，性能极差。
  • Cache-Control：指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程，相对时间，优先级更高，如max-age、no-cache、no-store、public/private。

协商缓存

  • Last-Modified / If-Modified-Since：基于时间，精度到秒。
  • ETag / If-None-Match：基于资源标识，更精确。

缓存策略

  • 通常：HTML文件使用协商缓存，静态资源（JS、CSS、图片）使用强缓存并配置hash。

跨域

 同源策略

  • 协议、域名、端口相同。

解决方案

  • CORS（跨域资源共享）：服务端设置Access-Control-Allow-Origin等头。
  • JSONP：利用<script>标签跨域，只支持GET。
  • 代理：开发环境用webpack-dev-server代理，生产环境用Nginx反向代理。
  • postMessage：跨窗口通信。
  • WebSocket：不受同源策略限制。

安全

XSS（跨站脚本攻击）

  • 反射型：恶意脚本作为参数注入。
  • 存储型：恶意脚本存储到数据库。
  • DOM型：前端JavaScript执行时注入。
  • 防御：转义（如<转成&lt;）、CSP（内容安全策略）、HttpOnly Cookie。

CSRF（跨站请求伪造）

  • 原理：利用用户已登录的状态，在用户不知情下执行操作。

  • 防御：

    • 验证Referer。
    • Token（常用）：服务器生成Token，前端在请求时携带（如表单隐藏域或请求头）。
    • SameSite Cookie：设置Cookie的SameSite属性为Strict或Lax。

性能优化

减少请求次数

  • 合并文件（雪碧图、合并JS/CSS）。
  • 使用HTTP/2多路复用。

减少请求体积

  • 压缩（Gzip、Brotli）。
  • 使用WebP格式图片。
  • 代码分割（Tree Shaking、懒加载）。

缓存

  • 利用浏览器缓存。

其他

  • CDN加速。
  • 预加载（preload）、预连接（preconnect）。
  • 减少重排重绘。
avatar
文章
阅读
粉丝