什么是 Web Workers？
Web Workers 是 HTML5 引入的一项新特性，是用来让 JavaScript 在后台执行的一种机制，它们运行在单独的线程中，避免了所有计算都在主线程执行的问题，使得页面能够在处理计算密集型任务时更加的流畅和响应。
为什么要在 Angular 中使用 Web Workers？
由于 Angular 是单页面应用程序，它需要花费较多的时间去处理复杂的视图和逻辑操作，因此，当我们需要执行计算密集型的任务时，主线程会被占用导致页面变得卡顿不流畅，这时候我们可以使用 Web Workers 来把计算任务转移到后台线程上，以提高应用程序的性能和响应能力。
如何在 Angular 中使用 Web Workers？
在 Angular 中使用 Web Workers 需要用到 ngx-web-worker 这个库，这个库是用来管理 Web Workers 的依赖项。使用方法如下：
首先我们需要安装依赖：
--- ------- -------------- ------
然后我们需要创建一个工作器，打开 src/app/app.worker.ts 文件，并在该文件中编写工作器代码：
--- ---------- --------------- -- --------------------------- -- ---- -- -- - ----- -------- - ------- -------- -- --------- ---------------------- ---
然后我们需要引入 NgxWebWorkerModule 模块，并在 AppModule 的 imports 数组中添加它：
------ - ------------------ - ---- -----------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -接下来在组件中创建一个引用工作器的实例，并与网页视图进行交互。在 src/app/app.component.ts 中，添加以下代码：
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ------- ---------- -
----------------------------
--------------------------------------- ------- -- -
----------------------
---
-
-在上面的代码中，我们使用 NgxWorker 服务通过 worker.postMessage 将消息发送给工作器，然后通过 worker.onMessage 订阅该消息的回调函数，将工作器响应的消息输出到控制台。
示例代码
以下是一个使用 Web Workers 进行计算的例子，它使用 crypto.getRandomValues 函数来生成随机数，并使用 Worker 计算并返回数组中所有元素之和：
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------
------------
--------- -----------
--------- ---------- ----------------
------- ------------
--
------ ----- ------------ -
------------------- ------- ---------- --
------- -------
-------- - --
----- ------------- -
----------- - -----
------------- - --
----- ----- - --- ----------------
------------------------------
----- --------- - ----
----- ------ - -------------
--- ------ - --
--- - - --
----- --------- - ------------------
----- -- - ------- -
----- --- - ---------- - ---------- --------
----- ------------ - ----- ----------------------- ----------
------------
-------------- ----
--
------ -- ------------------------- ----- -- --- - ------
- -- --- - --
------------- - --- - ------- - --------------- - ----
-
----- ------- - ------------------
----------- - -------
----------------- ------- - --------- - ---------------
-
-然后，我们可以在 src/app 目录下创建一个 worker.js 文件，来编写 Web Worker 代码：
--- ---------- --------------- -- --------------------------- -- ---- -- -- - ----- --- - ----------------- ----- -- --- - ------ ----------------- -------- ---
总结
Web Workers 是一个非常有用的技术，它使得我们可以处理计算密集型任务，而不会影响到应用程序的性能和响应能力。在 Angular 中，我们可以使用 ngx-web-worker 库来方便地管理工作器，并在组件中使用工作器完成计算任务。在实际的应用中，我们可以将工作器添加到服务中，并将其与其他服务和功能集成和使用，以此提高我们的应用程序的性能和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645e11c0968c7c53b007b194