感受webWorker

B站视频     git完整代码   

之前遇到的场景

1、vxe表格计算1000多条数极值/算数平方根的时候。

2、大文件上传时计算hashCode时候

一、不使用webWorker

目录结构

代码

运行结果

二、使用webWorker

目录结构

test.html

worker.js

//   斐波那契数列，模拟一个很耗时的计算过程
function fb(n) {
  if (n == 1 || n == 2) {
    return 1;
  }
  return fb(n - 1) + fb(n - 2);
}
console.time("fb执行时间1");
var result = fb(43);
console.timeEnd("fb执行时间1");
self.postMessage("worker");
// 在worker里self相当于global/window全局变量

worker2.js

//   斐波那契数列，模拟一个很耗时的计算过程
function fb(n) {
  if (n == 1 || n == 2) {
    return 1;
  }
  return fb(n - 1) + fb(n - 2);
}
console.time("fb执行时间2");
var result = fb(43);
console.timeEnd("fb执行时间2");
self.postMessage("worker2");
// 在worker里self相当于global/window全局变量

worker3.js

//   斐波那契数列，模拟一个很耗时的计算过程
function fb(n) {
  if (n == 1 || n == 2) {
    return 1;
  }
  return fb(n - 1) + fb(n - 2);
}
console.time("fb执行时间3");
var result = fb(43);
console.timeEnd("fb执行时间3");
self.postMessage("worker3");
// 在worker里self相当于global/window全局变量

运行结果在终端输入live-server(提前安装live-server: npm install live-serve -g)

页面如下

点击test.html,等待5秒左右就看到了

耗时比不开启webworker的要快三倍，是因为这里开启了三个webWorker,如果你电脑是2核的估计就体验不到了

右击电脑的固定栏

点击任务管理器

选择性能，这就是电脑的内核数。