创新互联Angular教程:AngularWebWorker

用 Web Worker 处理后台进程

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

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

添加一个 Web Worker

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

ng generate web-worker 

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

ng generate web-worker app

该命令会执行以下操作。

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

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

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

网站题目:创新互联Angular教程:AngularWebWorker
文章位置:http://www.shufengxianlan.com/qtweb/news31/335531.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联