面经（面试经验分享）是程序员们为了帮助他人顺利通过技术面试而分享的各类技术问题、解决方案和心得体会。这份文件的标题是“面经面经***”，意味着这是2024年4月10日某位面试者整理的面经。从标签“前端”可以得知，这份面经主要涉及前端技术领域的知识点。
## Websocket与HTTP区别
1. 含义不同：Websocket是一种全双工通信协议，建立在TCP之上。而HTTP（HyperText Transfer Protocol）是一个简单的传输-响应协议，通常运行在TCP之上，是单向的通信协议。
2. 连接方式不同：Websocket需要浏览器和服务器通过握手建立连接，而HTTP连接由浏览器主动发起，服务器预先不知道这个连接。
3. 连接长度不同：Websocket是持久连接，支持长连接机制。而HTTP本质上是短连接，尽管可以通过Ajax或者长轮询方式维持较长时间的连接，但仍然被视为短连接。
4. 连接状态不同：Websocket是有状态的双向连接，能够持续不断地进行通信。HTTP则是无状态的单向连接，一次请求-响应后连接即断开。
5. 协议开头不同：Websocket的协议开头是`ws://`或`wss://`（wss表示Websocket Secure，即使用了SSL/TLS加密）。HTTP协议的开头是`***`或`***`。
## Websocket与HTTP的联系
尽管Websocket与HTTP在用途和特性上有所区别，但它们都是基于TCP协议。Websocket是建立在HTTP协议之上的，它们之间的兼容性很好，如连接建立过程中对错误处理方式相同，都使用Request/Response模型进行连接的建立，且都可以在网络中传输数据。
## HTTP与HTTPS的区别
HTTPS（HyperText Transfer Protocol Secure）是HTTP的安全版本。主要区别在于HTTPS使用SSL/TLS协议来提供加密处理，保证数据传输的安全性，而HTTP是不加密的，存在数据泄露的风险。此外，HTTPS需要证书来验证服务器的身份，而HTTP则不需要。
## async与await的含义
在JavaScript中，`async`和`await`是用于处理异步操作的关键字。`async`关键字用于定义一个异步函数，即该函数会返回一个Promise对象。在异步函数中，可以使用`await`关键字来等待一个Promise对象的解决，使得异步操作可以按顺序执行。
`await`用于暂停异步函数的执行，等待Promise对象解决。当`await`后面的Promise对象解决后，会将解决值返回给`await`表达式，并继续执行异步函数。使用`async`和`await`可以编写更清晰和易于理解的异步代码，避免复杂的回调嵌套。
## CSS中的rem与em单位区别
在CSS布局中，`rem`和`em`都是用于设置元素字体大小的相对单位，但它们的行为有所不同：
- `rem`（root em）是相对于根元素（即`html`元素）的字体大小来设置元素的字体大小。如果根元素的字体大小为16px，则1rem等于16px。
- `em`是相对于父元素的字体大小来设置元素的字体大小。如果父元素的字体大小为16px，则1em也等于16px。
`rem`的优势在于它能够更方便地控制整个页面的字体大小，而`em`的优势则在于可以按照父元素的字体大小灵活设置子元素的字体大小，具有更强的继承性。
## JavaScript中的事件冒泡与捕获
在JavaScript中，事件流分为两个阶段：捕获阶段和冒泡阶段。
- 捕获阶段是从窗口对象开始，逐级向事件目标元素传递事件，直到达到目标元素。
- 冒泡阶段则是从目标元素开始，逐级向上传递事件到窗口对象。
`event.stopPropagation()`方法可以阻止事件冒泡，即停止事件继续向上层元素传播。此外，`event.preventDefault()`方法用于阻止事件的默认行为。
## Vue3中的Ref
在Vue3中，`ref`是用于创建响应式引用的API，它可以包装基本数据类型或复杂数据类型。其优点是能够轻松包装基本数据类型，并且具有清晰的访问和更新方式。
## 响应式编程
响应式编程是一种编程范式，以数据流和变化传播为基本概念。在前端框架Vue中，响应式编程被用来使数据与用户界面保持同步。当数据变化时，与数据相关联的UI会自动更新，反之亦然，从而简化了前端开发工作。
以上知识点涉及了前端开发中常用的Websocket、HTTP、HTTPS、异步编程、CSS单位、事件处理、Vue3新特性等多个方面。掌握这些知识点对于前端开发者来说是非常重要的。
