Http详解

lifeisapartyso
104 阅读9分钟

http的历史

1. HTTP/0.9

  • 发布时间：1991年

  • 特点：

    • 极其简单，只支持GET请求。
    • 没有头部信息，只能请求HTML文档。
    • 服务器响应后立即关闭连接。

2. HTTP/1.x

  • 发布时间：HTTP/1.0（1996年），HTTP/1.1（1997年）

  • 特点：

    • HTTP/1.0：

      • 引入了头部信息，支持多种内容类型（如HTML、图片等）。
      • 每次请求都需要建立和关闭连接，效率较低。

    • HTTP/1.1：

      • 引入了持久连接（默认保持连接打开，允许多个请求和响应）。
      • 支持管道化（pipelining），允许连续发送多个请求，但响应必须按顺序返回。
      • 增加了缓存控制、分块传输编码等特性。

3. HTTP/2

  • 发布时间：2015年

  • 特点：

    • 二进制协议：不再是文本格式，提高了解析效率。
    • 多路复用：允许在同一个连接上并行发送多个请求和响应，解决了HTTP/1.x的队头阻塞问题。
    • 头部压缩：使用HPACK算法压缩头部，减少开销。
    • 服务器推送：服务器可以主动向客户端推送资源，减少延迟。
    • 流优先级：允许客户端指定请求的优先级，优化资源加载顺序。

4. HTTP/3

  • 发布时间：2020年

  • 特点：

    • 基于QUIC协议：HTTP/3不再基于TCP，而是使用QUIC（基于UDP），减少了连接建立和重传的延迟。
    • 改进的多路复用：QUIC内置多路复用，避免了TCP的队头阻塞问题。
    • 连接迁移：QUIC支持连接迁移，设备切换网络时（如从WiFi到4G）无需重新建立连接。
    • 更快的加密握手：QUIC集成了TLS 1.3，加密握手更快，减少了延迟。

主要区别总结

  • HTTP/0.9：极简，仅支持GET请求。
  • HTTP/1.x：引入头部、持久连接、管道化等特性，但仍有队头阻塞问题。
  • HTTP/2：二进制协议、多路复用、头部压缩，解决了部分队头阻塞问题。
  • HTTP/3：基于QUIC，进一步优化了延迟和连接稳定性，解决了TCP的队头阻塞问题。

TCP和UDP的区别

UDP（用户数据报协议）

  • 是什么：UDP 是一种无连接的、轻量级的传输层协议，用于在网络上发送数据包。

  • 特点：

    • 无连接：不需要像 TCP 那样先建立连接，直接发送数据。
    • 不可靠：不保证数据包的顺序、完整性或是否到达目的地。
    • 速度快：因为没有复杂的握手和重传机制，传输效率高。
    • 简单：头部开销小，适合对实时性要求高的场景。
    • 应用场景：
  1. 实时音视频：如视频通话、直播（少量丢包不影响整体体验）。
  2. 在线游戏：需要低延迟，少量丢包可以容忍。
  3. DNS查询：快速获取域名对应的 IP 地址。
  4. 物联网（IoT）：设备间简单、高效的数据传输

TCP（传输控制协议）

  • 是什么：TCP 是一种可靠的、面向连接的传输层协议，用于在互联网上传输数据。

  • 特点：

    • 可靠性：确保数据包按顺序到达，丢失的数据包会重传。
    • 连接建立：通过三次握手建立连接（客户端和服务器互相确认）。
    • 队头阻塞：如果某个数据包丢失，后续数据包会被阻塞，直到丢失的包重传成功。
    • 广泛应用：HTTP/1.x 和 HTTP/2 都基于 TCP。
特性TCPUDP
连接方式面向连接（需要三次握手）无连接（直接发送数据）
可靠性可靠（确保数据完整和有序）不可靠（不保证数据到达）
速度较慢（有握手和重传机制）较快（无握手和重传机制）
数据顺序保证数据顺序不保证数据顺序
头部开销较大（20字节）较小（8字节）
适用场景文件传输、网页浏览等实时音视频、在线游戏等

为什么要有http请求

HTTP 请求是客户端（如浏览器）和服务器之间通信的基础，它的存在是为了实现以下核心目标：

1. 获取资源

  • 是什么：客户端通过 HTTP 请求从服务器获取资源（如网页、图片、视频等）。
  • 为什么：互联网的核心功能是资源共享，HTTP 请求是客户端获取服务器资源的标准方式。

2. 提交数据

  • 是什么：客户端通过 HTTP 请求向服务器发送数据（如登录信息、表单数据等）。
  • 为什么：许多应用需要用户与服务器交互，比如登录、注册、上传文件等，HTTP 请求是实现这些功能的基础。

3. 实现动态交互

  • 是什么：通过 HTTP 请求，客户端可以触发服务器执行某些操作（如查询数据库、更新数据等）。
  • 为什么：现代 Web 应用需要动态内容（如实时聊天、购物车更新），HTTP 请求是实现这些动态交互的关键。

4. 标准化通信

  • 是什么：HTTP 是一种标准化的协议，定义了客户端和服务器之间的通信规则。
  • 为什么：标准化使得不同设备、浏览器和服务器能够无缝协作，确保互联网的互操作性。

5. 支持缓存和优化

  • 是什么：HTTP 请求可以通过头部信息控制缓存（如缓存图片、CSS 文件等）。
  • 为什么：缓存可以减少重复请求，提高加载速度，节省带宽。

6. 支持安全和认证

  • 是什么：HTTP 请求可以通过 HTTPS 加密，确保数据传输安全；还可以通过头部信息实现认证（如 Token、Cookie）。
  • 为什么：保护用户隐私和数据安全是现代互联网的基本要求。

7. 支持多种功能

  • 是什么：HTTP 请求支持多种方法（如 GET、POST、PUT、DELETE 等），用于实现不同的功能。
  • 为什么：不同的操作（如读取、创建、更新、删除资源）需要不同的请求方法，HTTP 提供了灵活的机制。

HTTP 请求的核心作用总结

  • 获取资源：从服务器获取网页、图片、视频等。
  • 提交数据：向服务器发送用户输入或文件。
  • 动态交互：实现实时更新和交互功能。
  • 标准化通信：确保不同设备和系统之间的兼容性。
  • 优化性能：通过缓存减少重复请求。
  • 保障安全：通过加密和认证保护数据。

websocket和sse

WebSocket 和 SSE（Server-Sent Events）  是两种用于实现实时通信的技术，但它们的设计目标和适用场景有所不同。

1. WebSocket

  • 是什么：WebSocket 是一种全双工通信协议，允许客户端和服务器之间建立持久连接，双方可以随时发送数据。

  • 特点：

    • 双向通信：客户端和服务器可以同时发送和接收数据。
    • 低延迟：适合实时性要求高的场景（如聊天、游戏）。
    • 持久连接：连接建立后一直保持，直到主动关闭。

  • 适用场景：

    • 实时聊天应用
    • 在线游戏
    • 实时数据推送（如股票行情）

2. SSE（Server-Sent Events）

  • 是什么：SSE 是一种服务器向客户端单向推送数据的技术，基于 HTTP 协议。

  • 特点：

    • 单向通信：服务器可以向客户端推送数据，但客户端不能通过 SSE 向服务器发送数据。
    • 基于 HTTP：使用简单的 HTTP 协议，易于实现。
    • 自动重连：如果连接断开，客户端会自动重新连接。

  • 适用场景：

    • 实时通知（如新闻更新、天气预报）
    • 股票价格更新
    • 实时日志推送

WebSocket 和 SSE 的区别

特性WebSocketSSE
通信方向双向（客户端和服务器都可以发送数据）单向（仅服务器向客户端推送数据）
协议独立的 WebSocket 协议基于 HTTP
连接方式持久连接长连接（基于 HTTP）
适用场景实时聊天、在线游戏实时通知、数据推送

案例

WebSocket 案例：实时聊天应用

  • 场景：用户 A 和用户 B 通过聊天应用实时发送消息。

  • 实现：

    1. 客户端和服务器建立 WebSocket 连接。
    2. 用户 A 发送消息，服务器接收后立即推送给用户 B。
    3. 用户 B 回复消息，服务器接收后立即推送给用户 A。

  • 代码示例（Node.js + WebSocket）：

    // 服务器端
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log('收到消息:', message);
    // 广播消息给所有客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});
SSE 案例：实时新闻推送

  • 场景：新闻网站向用户实时推送最新新闻。

  • 实现：

    1. 客户端通过 SSE 连接到服务器。
    2. 服务器在有新新闻时，主动推送给客户端。
    3. 客户端接收并显示新闻。

  • 代码示例（Node.js + SSE）：

    // 服务器端
const http = require('http');

http.createServer((req, res) => {
  if (req.url === '/news') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    });

    // 每隔 5 秒推送一条新闻
    setInterval(() => {
      const news = `最新新闻: ${new Date().toLocaleTimeString()}`;
      res.write(`data: ${news}\n\n`);
    }, 5000);
  }
}).listen(3000);

总结

  • WebSocket：适合需要双向实时通信的场景（如聊天、游戏）。
  • SSE：适合服务器向客户端单向推送数据的场景（如新闻、通知）。

要将css的某个dom元素从页面上移除，有哪些方法

1. 使用 remove() 方法

  • 描述：直接调用元素的 remove() 方法，将其从 DOM 中移除。

  • 代码示例：

    const element = document.querySelector('.my-element');
element.remove();

2. 使用 parentNode.removeChild()

  • 描述：通过父元素调用 removeChild() 方法，移除指定的子元素。

  • 代码示例：

    const element = document.querySelector('.my-element');
element.parentNode.removeChild(element);

3. 设置 display: none

  • 描述：通过 CSS 将元素的 display 属性设置为 none，使其在页面上不可见，但元素仍然存在于 DOM 中。

  • 代码示例：

    const element = document.querySelector('.my-element');
element.style.display = 'none';

4. 设置 visibility: hidden

  • 描述：通过 CSS 将元素的 visibility 属性设置为 hidden，元素不可见但仍占据空间。

  • 代码示例：

    const element = document.querySelector('.my-element');
element.style.visibility = 'hidden';

5. 使用 innerHTML 或 outerHTML

  • 描述：通过清空父元素的 innerHTML 或设置 outerHTML 为空字符串来移除元素。

  • 代码示例：

    // 方法 1：清空父元素的 innerHTML
const parent = document.querySelector('.parent');
parent.innerHTML = '';

// 方法 2：设置元素的 outerHTML 为空
const element = document.querySelector('.my-element');
element.outerHTML = '';

6. 使用 replaceWith() 方法

  • 描述：用其他内容替换元素，如果替换内容为空，则相当于移除元素。

  • 代码示例：

    const element = document.querySelector('.my-element');
element.replaceWith(); // 移除元素

7. 使用 detach() 方法（jQuery）

  • 描述：如果你使用 jQuery，可以使用 detach() 方法移除元素，但保留其数据和事件。

  • 代码示例：

    $('.my-element').detach();

8. 使用 remove() 方法（jQuery）

  • 描述：使用 jQuery 的 remove() 方法移除元素，同时移除其数据和事件。

  • 代码示例：

    $('.my-element').remove();

总结

方法是否从 DOM 移除是否保留事件和数据备注
remove()是否原生方法，推荐使用
parentNode.removeChild()是否兼容性好
display: none否是元素仍在 DOM 中，不可见
visibility: hidden否是元素仍在 DOM 中，不可见但占位
innerHTML / outerHTML是否直接操作 HTML 字符串
replaceWith()是否替换或移除元素
detach()（jQuery）是是保留事件和数据
remove()（jQuery）是否移除事件和数据

推荐方法

  • 如果需要完全移除元素，推荐使用原生的 remove() 方法。
  • 如果只是隐藏元素，可以使用 display: none 或 visibility: hidden。
avatar
文章
阅读
粉丝