用 Web Worker 处理后台进程

Web Worker 允许你在后台线程中运行 CPU 密集型计算，解放主线程以更新用户界面。如果你发现你的应用会进行很多计算，比如生成 CAD 图纸或进行繁重的几何计算，那么使用 Web Worker 可以帮助你提高应用的性能。

CLI 不支持在 Web Worker 中运行 Angular。

添加一个 Web Worker

要把 Web Worker 添加到现有项目中，请使用 Angular CLI ng generate命令。

ng generate web-worker <location>

你可以在应用的任何位置添加 Web Worker。比如，要把一个 Web Worker 添加到根组件 src/app/app.component.ts，请运行如下命令。

ng generate web-worker app

该命令会执行以下操作。

• 把你的项目配置为使用 Web Worker，如果还没有的话。

• 把如下脚手架代码添加到 src/app/app.worker.ts以接收消息。

src/app/app.worker.ts

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

• 把如下脚手架代码添加到 src/app/app.component.ts以使用这个 Worker。

src/app/app.component.ts

if (typeof Worker !== 'undefined') {
  // Create a new
  const worker = new Worker(new URL('./app.worker', import.meta.url));
  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.
}

生成这个初始脚手架之后，你必须把代码重构成向这个 Worker 发送消息和从 Worker 接收消息，以便使用 Web Worker。

某些环境或平台（比如服务端渲染中使用的 @angular/platform-server不支持 Web Worker。为了确保你的应用能够在这些环境中工作，你必须提供一个回退机制来执行本来要由这个 Worker 执行的计算。