基于模块化开发环境搭建一个web worker

前言

什么是web worker?

Web Worke 是html5引入的规范，javascript最早就是一门网页语言，由于javascript需要操作DOM用于更新视图，就导致javascript最初是单线程的设计。

为什么不是多线程呢？

设想一下，如果javascript是多线程的，那么每个线程都去操作一下同一个DOM元素，这样就带来一个问题，DOM更新以哪次操作为准呢？这样一来就会使得的任务处理变得麻烦。

现在为什么又要设计web worker呢？

因为现在网页，已经不再是以前网页功能了，如今的网页功能十分丰富，逻辑也越来越繁杂，用户对于网页的体验要求越来预高，产品对于网页的设计也越来越多样，单靠一个主线程来执行，这些优化就想对难做了。

# 创建一个webWorker.js或者ts文件（这里我们用计算斐波那契第n项来举例）

function dosometion(n: number): number {
  if (n <= 0) return 0
  if (n === 1) return 1
  return dosometion(n - 1) + dosometion(n - 2)
}
onmessage = function(res) {
  const { data } = res
  if (data.num === 0 || data.num) {
    const N = dosometion(data.num)
    postMessage(N)
  }
}

# 在模块化中使用这个ts文件（在vue中也这样使用，无需下载插件）

function initWorker() {
  // ./worker.ts 是文件所在的路径（根据自己实际创建的路径来）
  const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' })
  // 传递参数到webWorker.ts, 并在onmessage中的res.data中接收
  worker.postMessage({ num: 45 })
  // 接收webWorker.ts中postMessage中传出的数据
  worker.onmessage = function(res) {
    console.log(res, 'worker')
    // 拿到数据后可以关闭worker
    worker.terminate()
  }
}

initWorker()

这样一来计算斐波那契第n项就不会阻塞主线程的执行，主线程做主线程的任务。

注意：web worker 不能用来操作DOM。