Server-sent Events (SSE) 是一种浏览器与服务器交互的简单但功能强大的技术，他可以让服务器推送新消息给浏览器，而不需要浏览器发起请求。但是，一旦在处理 SSE 消息时阻塞了 JS 主线程，就会影响应用程序的响应速度和用户体验。本文将详细讨论如何避免在处理 SSE 消息时阻塞 JS 主线程，并提供相关示例代码。
原理分析
SSE 技术使用 EventSource 接口来连接服务器并接收服务器发送的消息。当使用 EventSource 接口订阅服务器的 SSE 服务时，浏览器会在后台创建一个长连接，服务器使用该长连接向浏览器推送消息。当浏览器从服务器接收到 SSE 消息时，会调度 onmessage 事件，意味着该消息将被推送到 JS 主线程中。如果 SSE 消息处理时间太长，JS 主线程将会被阻塞，导致用户界面不响应、卡顿等问题。
如何避免
在处理 SSE 消息时，可以采用以下两种方法来避免 JS 主线程被阻塞：
1. 使用 Web Worker
Web Worker 是 HTML5 API 中的一部分，它允许在后台线程中运行 JavaScript。可以让 SSE 消息在后台线程中被处理，这样就不会阻塞 JS 主线程。使用 Web Worker 的代码示例如下：
--- ------ - --- -------------------- ---------------- - ----------- - ------ -- --------------------- - ----------- - --------------------------- --
在示例代码中，创建了一个名为 worker.js 的文件来处理 SSE 消息。当接收到 SSE 消息时，通过 worker.postMessage() 发送到后台，Worker 实例将在后台对其进行处理。处理完成后，可以通过 worker.onmessage 监听消息回调，接收处理结果。
2. 使用 RxJS
RxJS 是一个 JavaScript 库，用于处理异步事件序列。可以使用 RxJS Observable 来处理 SSE 消息，它提供了一种基于流的方法，可以让我们更容易地处理 SSE 消息，同时避免JS主线程被阻塞。
使用 RxJS 的代码示例如下：
------ - ---------- - ---- ------------------
------ --------------------------------
------ ------------------------
--------------------------------- ----------
------ -- -------
--------------- -- -
------
---在示例代码中，使用了 RxJS 的 Observable 来订阅 SSE 服务，通过 fromEvent() 方法将 SSE 事件转换为一个 Observable 对象，然后使用 map() 方法进行数据转换和过滤，最后使用 subscribe() 方法监听消息回调。在上述代码中，SSE 消息是在后台线程中处理的。
结论
在使用 SSE 技术时，避免 JS 主线程被阻塞很重要。在本文中提到了两种方法：使用 Web Worker 和 RxJS。使用 Web Worker 对于处理大量 SSE 消息时非常有用，而使用 RxJS 则更为简单方便。根据实际需要选择适当的技术，可以让 SSE 技术在应用中发挥更好的作用。
参考文献
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671def112e7021665ef4794c