前言
在 Web 开发中，前后端交互是必不可少的一环。为了实时更新内容，常常需要向服务器发送请求来获取新的数据。常见的解决方案是 Ajax 轮询和 SSE(Server-Sent Events)。
Ajax 轮询是指在客户端周期性地向服务器发送请求，以获取更新的数据。SSE 是一种实现服务器推送数据到客户端的技术。
在本文中，我们将探讨 SSE 和 Ajax 轮询在性能、可维护性等方面的比较，并提供指导意义和示例代码。
性能比较
Ajax 轮询的性能
Ajax 轮询的流程是：
- 客户端向服务器发起 HTTP 请求。
- 服务器处理请求，并返回响应。
- 客户端接收响应，解析数据。
- 客户端再次发送请求。
在轮询期间，客户端不断向服务器发送请求，即使没有更新的数据。这种方式会造成无谓的网络流量，从而降低系统的性能。此外，轮询的间隔时间虽然可以调整，但间隔时间太短会浪费带宽，间隔时间太长会使响应时间变慢。
SSE 的性能
SSE 的流程是：
- 客户端向服务器发起 SSE 请求。
- 服务器保持连接并发送事件到客户端。
- 客户端接收事件并进行处理。
在 SSE 中，客户端只需要发送一次请求，之后服务器会保持连接并将更新的数据推送到客户端。这种方式避免了客户端无谓的请求，只在有新数据到达时发送消息，从而降低网络流量。此外，在服务器端，推送数据到客户端可以通过 HTTP 流，保持连接，从而可以直接传送消息，不需要额外的请求。因此，SSE 的性能比 Ajax 轮询更高。
可维护性比较
Ajax 轮询的可维护性
Ajax 轮询的实现需要多次发送请求，在每个请求中需要处理请求、处理响应和解析数据，这会导致代码变得很冗长。
此外，当后端逻辑发生变化时，前端代码也需要相应地进行修改。这种紧密的耦合关系使得代码的可维护性降低。
SSE 的可维护性
SSE 的处理逻辑只需要处理服务器推送的事件，并对数据进行处理。因此，代码整洁且简单。此外，由于 SSE 是一种传统的 HTTP 响应，因此不会对后端有特殊的要求。
结论
通过对 Ajax 轮询和 SSE 的性能和可维护性进行比较，我们可以得出以下结论：
- 在性能方面，SSE 好于 Ajax 轮询。
- 在可维护性方面，SSE 更简单易于维护。
因此，我们在构建现代 Web 应用程序时，应该优先考虑使用 SSE。
示例代码
Ajax 轮询
-- -------------------- ---- -------
-------- ------ -
--------
---- -----------
-------- -------------- -
-- ------
-----------------
-- ------
---------------- ------
--
--------- ------
---
-SSE
var source = new EventSource("/updates");
source.addEventListener("message", function(event) {
// 处理数据
handleData(event.data);
}, false);来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671fd4e42e7021665effb006