使用 Web Workers 拯救超大计算量带来的卡顿

35 阅读1分钟

环境

  • vue3 vite
  • 无其他特殊配置

代码

worker.js

onmessage = function (event) {
  console.time('testForEach');

  for (let index = 0; index < 100000; index++) {
    for (let index2 = 0; index2 < 100000; index2++) {}
  }
  console.timeEnd('testForEach');
  console.log('event.data', event.data, typeof event.data);
  this.postMessage(event.data + 1);
};

index.vue

<template>
  <h1 @click="testAAA">测试{{ count }}</h1>
</template>
import MyWorker from './workers/worker.js?worker';

const count = ref(0);

const worker = new MyWorker();
// 监听消息
worker.onmessage = (e) => {
  count.value = e.data;
};

onUnmounted(() => {
  worker.terminate();
});

const testAAA = () => {
  worker.postMessage(count.value);
};

上面的循环,在 mac pro m1 8核 配置中运行时间3秒+,不敢想象没有 Workers 页面会卡成什么样