在现代 web 应用中，前端开发面临着越来越多的性能挑战，尤其是处理大量计算、数据处理和图像操作时，前端代码需要占用大量 CPU 时钟周期，这通常会导致应用变得缓慢以及难以响应。为了解决这些性能问题，我们可以使用 Web Worker 技术。
Web Worker 允许我们在主线程之外创建新的后台线程（Worker 线程），以便单独执行复杂的计算和任务。由于 Worker 线程和主线程运行在不同的线程上下文中，它们之间不会相互阻塞，从而提高了各种计算密集的任务的执行效率。在这篇文章中，我们将介绍如何使用 npm 包 workerjs，以方便我们在项目中使用 Web Worker 技术。
安装 workerjs
要使用 workerjs，首先需要在项目中安装它，可以通过以下命令来安装：
--- ------- --------
或者使用 yarn：
---- --- --------
创建 Worker
使用 workerjs 创建一个 Worker 线程非常简单，只需要调用 workerjs 提供的默认函数，向其中传递一个 JavaScript 文件的 URL，workerjs 会自动将这个 JavaScript 文件编译成 Worker 线程，代码如下：
------ ------ ---- ----------- ----- ------ - --- --------------------
监听 Worker 事件
在主线程中监听 Worker 线程的事件也很容易。workerjs 支持以下三种事件类型：
- error：在 Worker 线程中出现错误时触发。
- message：从 Worker 线程接收消息时触发。
- terminate：在 Worker 线程终止时触发。
以下代码展示了如何在主线程中监听 Worker 线程的消息事件：
-- ----------- ---------------------------------- ------- -- - -------------------- ------ ---------- ------------ ---
给 Worker 发送消息
主线程可以向 Worker 线程发送消息，以传递数据并指示 Worker 线程执行某些操作。要向 Worker 线程发送消息，请使用 postMessage 函数：
-- ------ ------ ------ -------------------- ----- ------ ----- - -- -- -- - - ---
在 Worker 中处理消息
在 Worker 线程中接收和处理消息也很简单，对于每个消息，Worker 线程都会触发 onmessage 事件，并将消息对象保留在事件的 data 属性中。以下是一个简单的例子：
-- - ------ --------------- --------- - ------- -- - ------------------- ---------------- ------------ -- ---- ----- ---- - ----------- ----- ------ - ------ - ------- -- ---------- ------------------------ -------- -------------------- --
在 Worker 中使用第三方库
大多数情况下，在 Worker 线程中使用第三方库是欢迎的，但是由于 Worker 线程没有 DOM 等主线程环境的 API，因此需要一些特殊的操作。
由于 browserify 无法在 Worker 线程中使用 Node.js API，因此您需要使用另一种打包工具（如 webpack）来打包 Worker 线程使用的代码。
以下是一个简单的示例代码，其中使用了 Lodash 库：
------ ------ ---- --------- -- - ------ --------------- --------- - ------- -- - ------------------- ---------------- ------------ -- ---------- ----- ---- - ----------- ----- ------ - ------------------ -------- -- ---------- ------------------------ -------- -------------------- --
结束 Worker 线程
当您不再需要 Worker 线程时，应该关闭它以释放资源。调用 terminate 函数即可关闭 Worker 线程：
-- ------- ------ -- -------------------
总结：使用 workerjs 简单、直接，方便我们使用 Web Worker 技术，避免在主线程中卡住 UI 线程，提高 web 应用程序的性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671178dd3466f61ffe6c6