聊一聊web worker

web worker

一、web worker到底是个啥啊？

MDN中这样解释：

Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面

在我理解来看

就是给你一个高科技的盒子（worker），分一部分你的灵魂（不等于你自己）进去，帮你干其他事

平时有很多情况，我们需要进行大量的计算，但是还需要保持页面的交互尽量不出问题，也就是页面交互和脚本进行数据计算尽量不产生冲突或者互相干扰

worker就可以解决这个问题，因为它可以保证一部分的代码在后台运行，而不影响页面的交互和渲染

二、说了那么多，怎么用worker勒？

使用其实很简单啦

//首先，在主线程中创建worker对象

const worker = new Worker('other.js');

//注意，这个other.js必须和主线程的脚本是同源的，且必须是网络上的，不能读取本地文件，例如“file://”

就这样你创建好了一个worker，就是这么简单

实际逻辑代码就写在各自文件中就OK了

那你总得和你的灵魂通信吧，不能他干什么你不知道，你干什么他不知道，对吧，毕竟实际还是都为身体服务的

1、通信

我感觉哈，我感觉相当于是消息订阅与发布，一个发送，一个注册接受

在主线程中（自己这里）

worker.postMessage()   发送消息，把你的数据给你的灵魂（提升肯定要一起提升对吧）

worker.onmessage = function(data){
	console.log("灵魂给我的信息："+data)
}

在worker中（灵魂那里）

postMessage()  或 postMessagepostMessage()

onmessage = function(data){
	console.log("灵魂给我的信息："+data)
}
或
self.onmessage = function(data){
	console.log("灵魂给我的信息："+data)
}

上面说了，worker只是你的一部分灵魂，所以灵魂的上下文环境和你自己的上下文是不一样的

所以很多东西，你有的，灵魂可不一定有，比如下面这些东西你分出去的灵魂就没有：

1. window 对象

2. document 对象

3. DOM 对象

4. parent 对象

---

别着急，灵魂还是有用的，毕竟是你分出去的一部分

1. 浏览器：navigator 对象

2.URL：location 对象

3.发送请求：XMLHttpRequest 对象

4.定时器：setTimeout / setInterval

5.应用缓存：Application Cache

---

2、那不能把灵魂分出去（创建worker），不收回来(关闭)吧？

worker的关闭 / 终止：

你自己（主线程）关闭就用：

worker.terminate();

你分出去的灵魂（子线程）关闭就用：

self.close()

至此，简单的worker的使用就完成了，当然，其中很多细节还有更多有用的操作我没写，不想成为一篇笔记
所以大家可以根据以下两个链接自行探知吧

MDN

阮一峰老师

看完有用记得三连啊 😁