Web应用程序的性能成为越来越重要，用户体验的方便也是一个要考虑的问题，使用并行计算，是实现这两个目标的关键之一。在前端中，Server-sent Events 和 WebWorkers 是两个在不同场景下实现并行计算的工具。在本篇文章中，我们将详细介绍在前端中如何使用 Server-sent Events 和 WebWorkers 实现并行计算，旨在提高读者对前端并行计算的深度理解，同时也可以指导读者如何在实际项目中使用。
Server-sent Events
通过 Server-sent Events 技术，浏览器可以从服务器端接受推送的事件信息。对于需要实时展示数据的项目中，可以通过 Server-sent Events 实现前端与服务器端共同完成数据计算的并行计算。
服务器配置
首先，需要在服务器端配置 Server-sent Events。Server-sent Events 是一个基于 HTTP 协议的服务端推送技术。以下是一个简单的 Node.js 服务器的配置示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - --------------------
--------------------
----- ---- - ---
-------------------- ------------- ---- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- -- - --- -----------------
-------------- -- -
-------- - ------------------------ - -----
-- ------
-------------- -- -
------------- ---------
-- ------
-
---
-------- ------------- ----- -
---------------- - - -------------------- - --------
-通过这个简单的 Node.js 服务器的配置，我们可以在客户端通过轮询获取服务器端推送的事件信息。
客户端实现
在客户端，我们使用 JavaScript 配合 EventSource 对象来实现 Server-sent Events。
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', function(e) {
const data = JSON.parse(e.data);
console.log(data);
});通过这个简单的例子，我们成功实现了在前端界面获取服务器计算并返回的数据。
WebWorkers
WebWorkers 是 HTML5 中引入的多线程技术，允许在后台线程中执行 JavaScript 脚本，实现前端多线程并行计算。在复杂的数据计算场景中，可以采用 WebWorkers 技术加速数据处理的速度。
Worker 线程
WebWorkers 在后台创建一个独立的线程，称为 Worker 线程。Worker 线程是一个与主线程分离的线程，并且拥有自己的上下文环境，无法直接访问主线程的环境。
const worker = new Worker('worker.js')数据传递
在主线程和 Worker 线程之间传递数据，可以使用 postMessage() 方法。这个方法将信息传递给 Worker 线程，并且在 Worker 线程内触发 message 事件。
在 Worker 线程中想要回传数据，则使用 postMessage() 方法也可以实现。
worker.postMessage(data);
worker.onmessage = function(e) {
console.log(e.data);
}关闭与终止
当不再需要使用一个 WebWorker 时，可以调用 Worker.terminate() 方法，彻底终止这个 Worker 线程。在 Worker 线程中，可以调用 close() 方法通知主线程关闭自己。
// 主线程 worker.terminate(); // Worker 线程 self.close();
示例代码
下面列出一份示例代码，用于在前端中实现使用 Server-sent Events 和 WebWorkers 实现并行计算：
index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----- --------------- ---------------------------- ----------------- ------------------ ------ --- ------------------ ------- ------ ------- ------------------------ ------- -------
index.js
-- -------------------- ---- ------- ----- ----------- - --- -------------------- ----- ------ - --- -------------------- --------------------------------------- ----------- - ----- ---- - ------------------- ------------------------- - - ------ ------------------------- --- ---------------- - ----------- - -------------------- - - -------- -
worker.js
-- -------------------- ---- ------- --------- - ----------- - ----- ---- - ------- -------------------- - - ------ ----- ------ - ----------------------- -------------------- - -------- ---------------------- - -- -- ------ ------- -
总结
Server-sent Events 和 WebWorkers 是在前端实现并行计算的两种技术方案。Server-sent Events 可以通过服务器端推送数据，客户端实时获取并处理。WebWorkers 则是在前端多线程中执行 JavaScript 代码，实现了加速处理数据的效果。以上两种技术方案都可以提高 Web 应用程序的性能和用户体验，及时了解和掌握它们，对于我们在实际项目开发中的帮助必不可少。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b5ed08add4f0e0ffea8c07