角 - 节省地创建和处置内联网络工作者

Posted 2023-03-06

【中文标题】角 - 节省地创建和处置内联网络工作者

【英文标题】：angular - savely create and dispose inline web workers

【发布时间】：2020-05-14 12:30:54

【问题描述】：

我的用例是我想在 Angular 库中使用网络工作者来运行繁重的计算。

由于角度 does not support web workers for libraries 尚未，我想到使用 inline web workers ，如下面的服务所示。我创建了 2 个内联工作人员并分别在 5 和 10 秒后终止它们。在 Firefox 开发工具中，我可以看到第二个和第三个线程相应地消失了。

现在我的问题是

worker.terminate 是否会保存所有内容，以便我不必担心内存泄漏？ 这种创建 Web Worker 的方法是否存在严重的安全问题？ 有没有办法在 chrome 开发工具上检查所有正在运行的网络工作者？

import  Injectable  from '@angular/core';

@Injectable()
export class WebWorkerService 
    constructor() 
        this.create(5000);
        this.create(10000);
    

    create(terminate) 
        const worker = this.createWorker((data) => 
            postMessage('test');
        );
        worker.onmessage = (e) => 
            console.log('msg', e);
            setTimeout(() => 
                worker.terminate();
            , terminate);
        ;
        worker.postMessage('hi');
    

    createWorker(fn: (_) => void) 
        const blob = new Blob(['self.onmessage = ', fn.toString()], 
            type: 'text/javascript',
        );
        const url = URL.createObjectURL(blob);

        return new Worker(url);
    

【参考方案1】：

是的。 没有。 是的，在开发工具的“源”面板中，您会看到当前选项卡启动的所有线程。

但这并不意味着你正在做的是一个好主意。

启动一个 Worker 是一项很挑剔的操作，涉及大量 IO，占用大量内存，甚至会拖慢主线程。Quoting the specs themselves:

一般来说，worker 寿命长，启动性能成本高，每个实例的内存成本高。

因此，与其启动大量 Worker，不如只启动一个并与之通信，以便它执行您希望它在页面的整个生命周期中执行的操作。最好在 Worker 中闲置一个相当长的脚本，而不是为您想要执行的每个简单算术运算启动一台新计算机。

【讨论】：

谢谢！这正是我需要的信息:)