js是单线程的，如何实现多线程？一份WebWorker食用指南附上

一个切图仔的自我救赎
我的开源工具库：mdollar
之后准备学习：unocss、浏览器的垃圾回收机制（v8）

前言

“js是单线程的，如何实现多线程？”当这句话从面试官口中说出来的时候，怎么去回答，才疏学浅的我，好奇心就一下被勾起来了。甚至脑中已经yy到了我与面试官对峙的场景：

面试官：“js是单线程的，如何实现多线程？”

我：“咱就是说************ ,你 ************吧”（此处省略一万字…）

以上开玩笑，接下来进入正题

作为前端的我们多多少少有听到过关于浏览器和js的线程以及进程问题，有时候可能会傻傻的分不清楚，今天就一起把线程进程都好好学习一下，一起看看对500W的数据排序并且不影响主线程的实现原理。

线程和进程的区别

“进程是操作系统分配资源的单位，线程是调度的基本单位，线程之间共享进程资源”

简单来说：“一个进程下可以包含多个线程，这些线程共享这个进程的资源。”

来个更直观的栗子：任务管理器

单线程和多线程

打个比方：现在的你刚搬完家，有很多东西要收拾，你一个人收拾完，那就是单线程。你喊上你的对（da）象（ge），两个人一起收拾，那就是多线程，如果你喊一车面包人来一起收拾，没错，也是多线程。这个比喻应该很容易理解了。

为什么要学多线程

现在有一个需求，有500W条数据给你处理，js是单线程的，那么处理大量的数据就会导致ui卡顿，给用户的体验非常的不好，那这时候老板跟你说喊你优化一下：

老板：“小b啊，你小子过来把这个处理一下，怎么这么卡？”

我：“这你电脑卡（手机卡）跟我有啥关系？不知道js是单线程的么？”

老板:“哦，原来是这样，那为什么别人家的网站不卡”

我:“你************”

这时候就得上多线程，也就是今天的主角WebWorker，虽然说像上面这种需求基本很少见，但是我可以不用，但我不能不会啊

WebWorker介绍

Web Worker 是 HTML5 标准的一部分，这一规范定义了一套 API，允许我们在 js 主线程之外开辟新的 Worker 线程，并将一段 js 脚本运行其中，它赋予了开发者利用 js 操作多线程的能力。

因为是独立的线程，Worker 线程与 js 主线程能够同时运行，互不阻塞。所以，在我们有大量运算任务时，可以把运算任务交给 Worker 线程去处理，当 Worker 线程计算完成，再把结果返回给 js 主线程。这样，js 主线程只用专注处理业务逻辑，不用耗费过多时间去处理大量复杂计算，从而减少了阻塞时间，也提高了运行效率，页面流畅度和用户体验自然而然也提高了

WebWorker的简单使用

举个非常简单的栗子

index.html

 let wk = new Worker("workerMain.js");
// 接收worker发来的消息
wk.onmessage = (evnet) => {
  console.log("收到worker发来的消息,", evnet.data);
};
// worker出错后抛出的钩子函数
wk.onerror = (err) => {
  stopWorker();
  console.log(error.filename, error.lineno, error.message); // 发生错误的文件名、行号、错误内容
};
// 发送消息给worker
function sendMessageToWorker() {
  wk.postMessage("发工资了！！！！");
}
// 关闭worker
function stopWorker() {
  wk.terminate();
}

workerMain.js

let i = 1
//  给主线程发送消息
function sendMessageToMainThread() {
    i++
    self.postMessage(i)
    setTimeout(simpleCount, 1000)
}
sendMessageToMainThread()
// 接收主线程发的消息
self.onmessage = (event) => {
    console.log(`老板你在说啥？哦，原来你跟我说：${event.data}`);
}

vue中使用

如果想在vue中使用这玩应，还不能直接用，需要安装worker-loader，来解析web worker，

我们直接上vueuse的库，用hooks中的useWebWorkerFn来实现这个功能，就能实现大部分场景的需求
这是一个官网的预览效果，展示了在主线中排序500万条数据和在子线程中排序的简单示例

//安装
npm i @vueuse/core

// 栗子
<script setup lang="ts">
import { computed, nextTick, ref } from "vue";
import { useDateFormat, useTimestamp, useWebWorkerFn } from "@vueuse/core";
/** 排序方法 */
const heavyTask = () => {
	const randomNumber = () => Math.trunc(Math.random() * 5_000_00);
	const numbers: number[] = Array(5_000_000).fill(undefined).map(randomNumber);
	numbers.sort();
	return numbers.slice(0, 5);
};

const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(heavyTask);
/**
 * 排序方法运行状态
 */
const running = computed(() => workerStatus.value === "RUNNING");

// 使用时间戳函数，这个time会持续更新
const time = useTimestamp();
// 格式化时间戳
const computedTime = useDateFormat(time, "YYYY-MM-DD HH:mm:ss SSS");
/** 数据 */
const data = ref<number[] | null>(null);
/** 当前执行的类型（主线程还是多线程） */
const runner = ref("");

/**
 * 主线程中排序
 */
const baseSort = async () => {
	data.value = null;
	await nextTick();
	data.value = heavyTask();
	runner.value = "Main";
};
/**
 * 多线程排序
 */
const workerSort = async () => {
	data.value = null;
	await nextTick();
	data.value = await workerFn();
	runner.value = "Worker";
};
</script>

<template>
	<p>
		当前时间: <b>{{ computedTime }}</b>
	</p>
	<note class="mb-2"> 这是一个Demo </note>
	<button @click="baseSort">在主线程中排序</button>
	<button v-if="!running" @click="workerSort">在Worker中排序</button>
	<!-- 结束线程正在执行的方法 -->
	<button v-else class="orange" @click="workerTerminate('PENDING')">结束worker执行</button>
	<p v-if="data">
		执行线程: <strong>{{ runner }}</strong
		><br />
		执行结果: <strong>{{ data }}</strong>
	</p>
</template>