在前端开发中，为了提高页面的性能和响应速度，我们经常需要使用 Web Worker 进行并行计算。WebWorker 是一种容器化的 JavaScript 环境，可以在一个独立的线程中运行脚本，与主线程互不干扰。但是，在实际开发中，使用 Web Worker 也存在一些问题，比如需要手动管理线程之间的通信、代码重用等。这时候，npm 包 webworkify 可以帮助我们更加便捷地使用 Web Worker。
安装
通过 npm 安装 webworkify ：
npm install --save webworkify
使用
在主线程中使用
在主线程中使用 webworkify 很简单，只需要传入 Web Worker 脚本的路径即可：
var webworkify = require('webworkify');
var worker = webworkify(require('./worker.js'));
worker.addEventListener('message', function (event) {
console.log(event.data);
});上面的代码中，我们引入了 webworkify 模块，并创建了一个 Web Worker，将 worker.js 作为参数传入。然后，我们监听 message 事件，接收 Web Worker 返回的数据。
在 Web Worker 中使用
在 Web Worker 中使用 webworkify 同样非常简单，只需要传入 self（或者 this）即可：
var webworkify = require('webworkify');
var w = webworkify(self);
w.addEventListener('message', function (event) {
console.log(event.data);
});
w.postMessage('Hello from worker!');上面的代码中，我们在 Web Worker 中引入了 webworkify 模块，并创建了一个新的 Web Worker。然后，我们监听 message 事件，接收主线程传递过来的数据。
最后，我们使用 postMessage 方法将数据发送回主线程。
示例
以下是一个示例代码，演示如何使用 webworkify 计算斐波那契数列：
主线程
var webworkify = require('webworkify');
var worker = webworkify(require('./worker.js'));
worker.addEventListener('message', function (event) {
console.log(event.data);
});
worker.postMessage(10);Web Worker
-- -------------------- ---- -------
--- ---------- - ----------------------
-------- ------ -
-- -- - -- -
------ --
-
------ ----- - -- - ----- - ---
-
--- - - -----------------
----------------------------- -------- ------- -
--- - - -----------
--- ------ - -------
----------------------
---上面的代码中，我们定义了一个计算斐波那契数列的函数 fib。在主线程中，我们创建了一个 Web Worker，并将 worker.js 作为参数传入。然后，我们将数字 10 通过 postMessage 方法传递给 Web Worker，在 Web Worker 中进行计算，最后将结果通过 postMessage 方法返回给主线程，并在控制台输出结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/42501