无法让多个工作组工作并导致冻结答案

【问题标题】：not able to make multiple work group working and causing freeze无法让多个工作组工作并导致冻结
【发布时间】：2023-02-03 14:25:11
【问题描述】：

我正在创建多个工作线程，在我的例子中，我正在尝试创建 2：

这是我创建工作线程的代码

function createWorker(data1, data2) {
  return new Promise((resolve) => {
    let worker = new Worker();
    worker.postMessage(data1, data2);
    worker.onmessage = (event) => {
      postMessageRes = event.data;
      if (postMessageRes == 200) {
        // loadCOPC();
      } else {
        workerCount += 1;
        let position = postMessageRes[0];
        let color = postMessageRes[1];
        for (let i = 0; i < position.length; i++) {
          positions.push(position[i]);
          colors.push(colors[i]);
        }
        resolve(true);
      }
    };
  });
}

并在我的循环中使用它

 for (let m = 0; m < keyCountMap.length; ) {
    let remaining = totalNodes - doneCount;
    let numbWorker = Math.min(chunk, remaining);
    for (let i = 0; i < numbWorker; i++) {
      promises.push(createWorker([keyCountMap[m], keyCountMap[m + 1]]));
      m += 2;
    }
    Promise.all(promises).then((response) => {
      console.log("one chunk finishes");
    });
  }

如果我而不是所有这些使用一个静态工作线程并在循环中仅调用一个 postMessage 但不是在我尝试像代码中的此处那样制作块时，代码工作正常。

当我运行代码时，我的浏览器冻结

【问题讨论】：

标签： javascript worker

【解决方案1】：

该问题可能是由于creating multiple worker threads in a loop、could lead to a large number of worker threads and result in high memory usage 导致的，最终导致浏览器冻结。

解决此问题的一种方法是通过设置最大工作线程数来限制一次创建的工作线程数，并且仅在某些工作线程完成任务时才创建新的工作线程。

下面是实现此方法的代码示例：

const MAX_WORKERS = 4;
let promises = [];
let workerCount = 0;

function createWorker(data1, data2) {
  return new Promise((resolve) => {
    let worker = new Worker();
    worker.postMessage(data1, data2);
    worker.onmessage = (event) => {
      postMessageRes = event.data;
      if (postMessageRes == 200) {
        // loadCOPC();
      } else {
        workerCount += 1;
        let position = postMessageRes[0];
        let color = postMessageRes[1];
        for (let i = 0; i < position.length; i++) {
          positions.push(position[i]);
          colors.push(colors[i]);
        }
        if (workerCount === MAX_WORKERS) {
          workerCount = 0;
          promises = [];
        }
        resolve(true);
      }
    };
  });
}

for (let m = 0; m < keyCountMap.length; ) {
  let remaining = totalNodes - doneCount;
  let numbWorker = Math.min(chunk, remaining);
  for (let i = 0; i < numbWorker; i++) {
    promises.push(createWorker([keyCountMap[m], keyCountMap[m + 1]]));
    m += 2;
  }
  if (workerCount === MAX_WORKERS) {
    Promise.all(promises).then((response) => {
      console.log("one chunk finishes");
    });
  }
}

【讨论】：