angular-cn/aio/content/guide/web-worker.md

Using web workers with Angular CLI

通过 Angular CLI 使用 Web Worker

Web workers allow you to run CPU intensive computations in a background thread, freeing the main thread to update the user interface.

Web Workers 允许你在后台线程中运行 CPU 密集型计算，解放主线程，以便更新用户界面。

If you find your application becomes unresponsive while processing data, using web workers can help.

如果你发现你的应用在处理数据时停止了响应，那么使用 Web Workers 可以为你提供帮助。

Adding a web worker

添加一个 Web Worker

You can add a web worker anywhere in your application. If the file that contains your expensive computation is src/app/app.component.ts, you can add a web worker using ng generate web-worker app.

你可以在应用中的任何地方添加一个 Web Worker。假设包含沉重计算工作的文件是 src/app/app.component.ts，你可以使用 ng generate web-worker app 新增一个 Web Worker。

Running this command will:

运行这个命令会：

• configure your project to use web workers, if it isn't already.

  把你的项目配置成使用 Web Workers 的（如果尚未配置过）。

• add src/app/app.worker.ts with scaffolded code to receive messages:

  添加 src/app/app.worker.ts 文件，并添加用于接收消息的脚手架代码：

  addEventListener('message', ({ data }) => { const response = `worker response to ${data}`; postMessage(response); });

• add scaffolded code to src/app/app.component.ts to use the worker:

  往 src/app/app.component.ts 中添加使用该 worker 的脚手架代码：

  if (typeof Worker !== 'undefined') { // Create a new const worker = new Worker('./app.worker', { type: 'module' }); worker.onmessage = ({ data }) => { console.log(`page got message: ${data}`); }; worker.postMessage('hello'); } else { // Web workers are not supported in this environment. // You should add a fallback so that your program still executes correctly. }

After the initial scaffolding, you will need to refactor your code to use the web worker by sending messages to and from.

在完成了最初的脚手架之后，你需要重构代码，通过来回发送消息来使用 Web Worker。

Caveats

警告

There are two important things to keep in mind when using web workers in Angular projects:

在 Angular 项目中使用 Web Workers 时，要记住两个重要事项：

• Some environments or platforms, like @angular/platform-server used in Server-side Rendering, don't support web workers. You have to provide a fallback mechanism to perform the computations that the worker would perform to ensure your application will work in these environments.

  某些环境或平台（比如服务端渲染中使用的 @angular/platform-server 不支持 Web Workers。你必须提供一个后备机制来执行 Worker 要执行的计算，以确保你的应用能在那些环境中运行。

• Running Angular itself in a web worker via @angular/platform-webworker is not yet supported in Angular CLI.

  Angular CLI 尚不支持通过 @angular/platform-webworker在 Web Worker 中运行 Angular 自身。