前言
JavaScript 是一种单线程语言，这就意味着在使用 JavaScript 开发前端应用时，我们无法实现多线程并行计算。为了解决这个问题，HTML5 提供了 Web Worker API，这个 API 允许开发人员在后台线程中执行 JavaScript 代码，从而实现并行计算。
Web Worker 的基本原理
Web Worker API 的基本原理是通过在主线程中创建一个 Worker 线程，这个线程可以接受主线程中的任务，并将结果返回到主线程。与主线程不同，Worker 线程是完全独立的，并且没有访问 DOM 和 BOM 的权限。
使用 Web Worker 实现并行计算示例
下面是一个简单的示例，通过 Web Worker 实现了并行计算。首先在 HTML 文件中创建一个按钮，当用户点击按钮时，会触发计算操作。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------ ----------
-------
------
------- -------------------------------------
------- -----------------------
--- -------
-------- ------------- -
-- ------- -------- --- ------------ -
-- ------- -------- -- ------------ -
------ - --- --------------------------
-
---------------- - -------- ------- -
------------------------------------------- - -----------
--
- ---- -
------------------------------------------- - ------------ --- ---------
-
-
---------
---- ------------------
-------
-------在上面的示例中，当用户点击“开始计算”按钮时，会调用 JavaScript 函数 startWorker()。这个函数首先检查是否支持 Web Worker，如果支持则创建一个新的 Worker 对象，并指定 Worker 线程的 JavaScript 文件为 calculations.js。当 Worker 线程计算完毕后，会触发 Worker 线程的 onmessage 事件，并将计算结果发送到主线程。主线程接收到结果后，将结果显示在页面上。
接下来，我们来看一下 Worker 线程的 JavaScript 文件 calculations.js。
-- -------------------- ---- -------
-------- ---------------- -
--- ------ - --
--- ---- - - -- - - ------ ---- -
--- ---- - - -- - - ------ ---- -
------ -- ----------- ---
-
-
------ -------
-
-------------- - -------- ------- -
--- ----- - -----------
--- ------ - -----------------
-------------------------
--在上面的示例中，我们创建了一个名为 calculate() 的函数，用来进行计算。在 Worker 线程的 onmessage 事件中，我们接受到从主线程传递过来的请求，并获取请求中的参数。接下来调用 calculate() 函数进行计算，并将计算结果通过 postMessage() 方法发送到主线程。
总结
本文介绍了如何使用 Web Worker 实现 JavaScript 中的并行计算。Web Worker API 提供了开发多线程的能力，从而使我们能够更加高效地利用计算机的多核 CPU。当然，使用 Web Worker 也有一些注意事项，例如 Worker 线程无法访问 DOM 和 BOM，需要使用 postMessage() 方法进行通信等。希望本文能够帮助读者更好地理解 Web Worker 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c22b1968c7c53b0b2e180