前端面试-HTTP篇

1.websocket和http的区别

使用场景对比

HTTP

• HTTP（Hypertext Transfer Protocol）是一种应用层协议，最初设计用于在客户端和服务器之间传输超文本。它是一种无状态的协议，每个请求都是独立的，不保留前一次请求的状态信息。HTTP 通常用于传输网页、图片、文本等静态资源，以及通过 RESTful API 进行数据传输。

WebSocket

• WebSocket 是一种全双工通信协议，建立在单个 TCP 连接上，允许在客户端和服务器之间进行双向通信。WebSocket 的设计旨在解决 HTTP 协议在实时性和交互性方面的不足。它广泛应用于实时聊天、在线游戏、金融行业的实时数据更新等场景。

协议对比

HTTP

• 协议类型： 无状态、请求-响应型协议。
• 通信方式： 单向通信，客户端发送请求，服务器返回响应。
• 持久连接： 支持持久连接，通过 HTTP Keep-Alive 头字段可以在一次连接中发送多个请求和响应。

WebSocket

• 协议类型： 全双工通信协议。
• 通信方式： 双向通信，客户端和服务器可以随时发送消息。
• 持久连接： 基于单个 TCP 连接，保持连接状态，避免了每次通信都需要重新建立连接的开销。

链接方式对比

HTTP

• 连接建立： 每个请求都需要建立一个新的连接。
• 连接关闭： 服务器在每个响应之后会关闭连接，客户端需要重新建立连接发送新的请求。

WebSocket

• 连接建立： 通过 HTTP 协议建立初始连接，然后升级为 WebSocket 协议。建立连接后保持开放状态。
• 连接关闭： 可以由客户端或服务器发起关闭连接请求，而不需要重新建立连接。

通信性质对比

HTTP

• 单向通信： 请求-响应模式，客户端发送请求，服务器返回响应。
• 轮询： 实现实时性的方式之一是通过轮询，但效率低，增加了网络负担。

WebSocket

• 双向通信： 客户端和服务器可以随时发送消息，实现实时的双向通信。
• 事件驱动： 基于事件的模型，服务器或客户端可以通过事件触发实现及时的通信。

2. 前端跨页面通信的方法？

• LocalStorage 或 SessionStorage:这两个 Web 存储 API 可以在不同页面之间共享数据。一个页面可以将数据存储在本地存储中，另一个页面则可以读取该数据并进行相应处理。通过监听 storage 事件，可以实现数据的实时更新。
• Cookies:使用 Cookies 也可以在不同页面之间传递数据。通过设置和读取 Cookie 值，可以在同一域名下的不司页面之间交换信息。
• PostMessage: window.postMessage()方法允许从一个窗口向另一个窗口发送消息，并在目标窗口上触发.message 事件。通过指定目标窗口的 origin，可以确保只有特定窗口能够接收和处理消息。
• Broadcast Channel:Broadcast Channel API 允许在同一浏览器下的不同上下文(例如，在不同标签页或iframe 中)之间进行双向通信。它提供了一个类似于发布-订阅模式的机制，通过创建一个广播频道，并在不同上下文中加入该频道，可以实现消息的广播和接收。
• SharedWorker:sharedWorker 是一个可由多个窗口或标签页共享的 Web Worker，它可以在不同页面之间进行跨页面通信。通过 SharedWorker，多个页面可以通过 postMessage 进行双向通信，并共享数据和执行操作。
• IndexedDB:IndexedDB 是浏览器提供的一个客户端数据库，可以在不同页面之间存储和共享数据。通过在一个页面中写入数据，另一个页面可以读取该数据。
• WebSockets:WebSockets 提供了全双工的、双向通信通道，可以在客户端和服务器之间进行实时通信。通过建立 WebSocket 连接，可以在不同页面之间通过服务器传递数据并实现实时更新。