Angular Web Worker

2022-07-13 09:10 更新

用 Web Worker 處理后臺進程

Web Worker 允許你在后臺線程中運行 CPU 密集型計算,解放主線程以更新用戶界面。如果你發(fā)現(xiàn)你的應(yīng)用會進行很多計算,比如生成 CAD 圖紙或進行繁重的幾何計算,那么使用 Web Worker 可以幫助你提高應(yīng)用的性能。

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

添加一個 Web Worker

要把 Web Worker 添加到現(xiàn)有項目中,請使用 Angular CLI ?ng generate? 命令。

ng generate web-worker <location>

你可以在應(yīng)用的任何位置添加 Web Worker。比如,要把一個 Web Worker 添加到根組件 ?src/app/app.component.ts?,請運行如下命令。

ng generate web-worker app

該命令會執(zhí)行以下操作。

  1. 把你的項目配置為使用 Web Worker,如果還沒有的話。
  2. 把如下腳手架代碼添加到 ?src/app/app.worker.ts? 以接收消息。
  3. addEventListener('message', ({ data }) => {
      const response = `worker response to ${data}`;
      postMessage(response);
    });
  4. 把如下腳手架代碼添加到 ?src/app/app.component.ts? 以使用這個 Worker。
  5. 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.
    }

生成這個初始腳手架之后,你必須把代碼重構(gòu)成向這個 Worker 發(fā)送消息和從 Worker 接收消息,以便使用 Web Worker。

某些環(huán)境或平臺(比如服務(wù)端渲染中使用的 ?@angular/platform-server? 不支持 Web Worker。為了確保你的應(yīng)用能夠在這些環(huán)境中工作,你必須提供一個回退機制來執(zhí)行本來要由這個 Worker 執(zhí)行的計算。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號