WebSocket与HTTP深度解析：全双工通信与异步编程在面经中的应用

今天我们将深入探讨几个关键的IT领域话题，包括前端技术中的WebSocket与HTTP的区别，以及在JavaScript中的异步编程工具`async`和`await`的使用，以及CSS中的`rem`和`em`单位。首先，让我们从WebSocket与HTTP的对比开始。 **WebSocket与HTTP的区别** 1. **含义与连接方式**: WebSocket是一种全双工的通信协议，它允许客户端与服务器之间建立持久连接，不像HTTP那样是单向的，HTTP协议通常在TCP之上运行，且服务器预先不感知客户端的连接请求。WebSocket的连接是由浏览器主动发起，而HTTP则是客户端到服务器的一次性请求。 2. **连接状态与协议标识**: - WebSocket连接是状态化的，允许双方实时双向通信，其URL以`ws`或`wss`（加密版本）开头。 - HTTP则是无状态的，每一条请求都需要独立的连接，对应的URL以`http`或`https`开头。 3. **连接长度和控制**: - WebSocket支持长时间的持续连接，适用于需要实时通信的场景，如在线聊天、游戏等。 - HTTP通过长轮询或Server-Sent Events (SSE)等方式实现一定程度的持久连接，但本质上仍是短连接。 4. **协议模型**: - WebSocket使用类似的请求-响应模型，但允许双向通信，而HTTP遵循严格的请求-响应模式。 **异步编程：async和await** 在JavaScript中，`async`和`await`是用于处理异步操作的重要特性： - `async`关键字标记一个函数为异步，返回一个Promise对象，使得函数内部可以使用`await`来等待其他异步操作完成。 - `await`关键字用于暂停当前异步函数，直到Promise对象解析或拒绝。这有助于简化异步代码的编写，减少回调地狱和代码嵌套。 **CSS单位：rem和em** 在CSS布局中，`rem`（root em）和`em`都是用于设置元素字体大小的相对单位： - `rem`是相对于根元素（HTML元素）的字体大小计算，适合全局调整。 - `em`是相对于父元素的字体大小计算，更适合创建可伸缩的布局，可以根据父元素的变化自动调整。 总结来说，本文档涵盖了前端开发中WebSocket与HTTP的底层差异，异步编程中`async`和`await`的作用，以及CSS中两种尺寸单位的特点。这些知识点对于理解和使用现代Web技术非常重要，能够帮助开发者构建高效、可维护的网络应用。