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

CLI 不支持在 Web Worker 中運(yùn)行 Angular。
添加一個(gè) Web Worker
要把 Web Worker 添加到現(xiàn)有項(xiàng)目中,請(qǐng)使用 Angular CLI ?ng generate? 命令。
ng generate web-worker 你可以在應(yīng)用的任何位置添加 Web Worker。比如,要把一個(gè) Web Worker 添加到根組件 ?src/app/app.component.ts?,請(qǐng)運(yùn)行如下命令。
ng generate web-worker app該命令會(huì)執(zhí)行以下操作。
- 把你的項(xiàng)目配置為使用 Web Worker,如果還沒有的話。
- 把如下腳手架代碼添加到 ?
src/app/app.worker.ts? 以接收消息。 - 把如下腳手架代碼添加到 ?
src/app/app.component.ts? 以使用這個(gè) Worker。
addEventListener('message', ({ data }) => {
const response = `worker response to ${data}`;
postMessage(response);
});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è)初始腳手架之后,你必須把代碼重構(gòu)成向這個(gè) Worker 發(fā)送消息和從 Worker 接收消息,以便使用 Web Worker。
某些環(huán)境或平臺(tái)(比如服務(wù)端渲染中使用的 ?
@angular/platform-server? 不支持 Web Worker。為了確保你的應(yīng)用能夠在這些環(huán)境中工作,你必須提供一個(gè)回退機(jī)制來執(zhí)行本來要由這個(gè) Worker 執(zhí)行的計(jì)算。
網(wǎng)頁名稱:創(chuàng)新互聯(lián)Angular教程:AngularWebWorker
本文URL:http://www.dlmjj.cn/article/dpccjoo.html


咨詢
建站咨詢
