Angular客户端heavy计算场景下实现可交互加载屏的方案咨询

JavaScript运行在浏览器主线程，同步计算、UI渲染、事件回调、定时器任务都在该线程按顺序执行。Heavy同步计算会独占主线程，导致所有待执行的UI更新、交互事件都被阻塞，这并非单页应用的固有局限，仅需将计算任务移出主线程即可解决。

Web Worker是浏览器原生提供的多线程能力，可独立于主线程在后台运行JS脚本，完全不阻塞主线程的UI交互和更新，完全符合你要求的「无需拆分长进程上报进度、仅靠计时器/用户交互更新加载屏」的需求，所有计算逻辑仍然在用户本地执行，无需上传到服务端。

Angular 中实现步骤 #

1. 使用Angular CLI生成Worker文件，CLI会自动配置构建规则，无需手动修改配置：
   ng generate web-worker heavy-calc
2. 将纯计算逻辑迁移到生成的Worker文件中，监听主线程传入的计算参数，计算完成后将结果回传给主线程
3. 业务组件中触发计算时，先展示加载屏，启动加载屏的动态更新/交互逻辑，再初始化Worker并传入计算参数，监听Worker返回的结果后隐藏加载屏、渲染结果即可

代码示例 #

Worker 逻辑（heavy-calc.worker.ts） #

/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {
  // 此处放入你的全部heavy计算逻辑
  const result = customHeavyCalculation(data.calcParams);
  postMessage(result);
});

function customHeavyCalculation(params: any) {
  // 替换为你原有的计算代码，无需做任何拆分
  let calcRes = 0;
  for (let i = 0; i < 1000000000; i++) {
    calcRes += i * params.factor;
  }
  return calcRes;
}

业务组件逻辑 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-calc-page',
  templateUrl: './calc-page.component.html',
  styleUrls: ['./calc-page.component.css']
})
export class CalcPageComponent {
  showLoadingSpinner = false;
  loadingCountdown = 10;
  finalResult: number | undefined;

  triggerCalculation() {
    // 展示加载屏
    this.showLoadingSpinner = true;
    // 启动加载屏动态更新逻辑，如倒计时、实时时钟等，完全不受计算影响
    const loadingTimer = setInterval(() => {
      this.loadingCountdown--;
      if (this.loadingCountdown <= 0) this.loadingCountdown = 10;
    }, 1000);

    // 初始化Worker并传入计算参数
    const calcWorker = new Worker(new URL('./heavy-calc.worker', import.meta.url));
    calcWorker.postMessage({ calcParams: { factor: 3 } });

    // 监听计算完成事件
    calcWorker.onmessage = ({ data }) => {
      this.finalResult = data;
      // 清理资源
      clearInterval(loadingTimer);
      calcWorker.terminate();
      // 隐藏加载屏
      this.showLoadingSpinner = false;
    };
  }

  // 加载屏交互事件，可正常响应
  onLoadingClick() {
    // 此处可实现加载屏点击交互，如切换展示内容、小游戏逻辑等
    this.loadingCountdown = 10;
  }
}

• Web Worker中无法访问DOM、window对象以及Angular的组件/服务实例，因此计算逻辑需要是仅依赖传入参数的纯函数，无外部上下文依赖即可
• 若计算逻辑依赖第三方库，只要库本身不依赖DOM/浏览器主线程专属API，均可直接导入到Worker文件中使用

内容的提问来源于stack exchange，提问作者mouisaac