用 Web Worker 处理后台进程link

Background processing using web workerslink

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

Web workers allow you to run CPU-intensive computations in a background thread, freeing the main thread to update the user interface. If you find your application performs a lot of computations, such as generating CAD drawings or doing heavy geometrical calculations, using web workers can help increase your application's performance.

添加一个 Web Workerlink

Adding a web workerlink

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

To add a web worker to an existing project, use the Angular CLI ng generate command.

ng generate web-worker 生成到的位置

ng generate web-worker location

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

You can add a web worker anywhere in your application. For example, to add a web worker to the root component, src/app/app.component.ts, run the following command.

ng generate web-worker app

该命令会执行以下操作。

The command performs the following actions.

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

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

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

  Adds the following scaffold code to src/app/app.worker.ts to receive messages.

  addEventListener('message', ({ data }) => { const response = `worker response to ${data}`; postMessage(response); });
  src/app/app.worker.ts

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

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

  Adds the following scaffold code to src/app/app.component.ts to use the 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. }
  src/app/app.component.ts

        
          content_copy
        
        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.
  }
      

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

After you generate this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker.