Web Worker

什么是 web worker

js本身是一种单线程设计,我们无法在同一时刻并行运行多个脚本。虽然可以用setInterval,setTimeout方法来模拟多线程,但实际上这些方法都是存在于主线程使用的一个事件循环里,一旦存在一个耗时操作,就会牵制主线程的操作,导致页面卡顿。

Web Worker通过引入类似线程的机制使这种问题得到了解决,通过在当前js主线程中使用worker类加载一个js文件来开辟一个新线程,起到互不阻塞执行的效果。这个js worker运行在另一个全局上下文中,不同于当前的window,所以不能用window变量来获取当前全局的范围。

什么时候使用

1 当需要一个js脚本进行大量的复杂计算时候,通过postMessage和onmessage进行通信 2 功能模块化。importScripts这个方法只能在worker线程中执行,该方法可以在worker线程中引入多个脚本,则该线程可以使用所引入脚本中的任意变量和函数。 3 当需要执行一个不断向后台发送更新请求的时候,可以将这个过程放到工作线程里,然后将结果返回给主线程。

如何使用

①创建一个线程:
通过new一个Worker实例来创建一个线程,构造函数参数传递一个指向js文件资源的url。
const worker = new Worker('a.js')

②与一个线程通信:
主线程

1
2
3
4
5
6
7
onload =function(){
var worker =new Worker('a.js');
worker.onmessage = function (evt) {//接收子线程消息
console.log(evt.data); //hello received
};
worker.postMessage("hello")//向子线程发送消息
}

子线程

1
2
3
4
onmessage =function(event) { //接收主线程消息
let str = event.data;
postMessage(str+" received"); //发送子线程消息
};

在主线程中,消息事件依托于创建出来的worker对象,而在工作线程中,消息事件依托于全局对象。

当工作线程完成了任务后,需要调用terminate方法来释放内存和避免僵尸线程的情况:
worker.terminate();

cesium实现的多线程

如何使用:

1 用户只需要创建一个TaskProcessor,指定具体需要创建线程的类型 :圆

2 然后调用scheduleTask,里面是该对象的具体参数 : 圆position + 半径

3 处理结果通过promise机制返回一个异步对象,方便用户使用

cesium设计的多线程会通过创建TaskProcessor指定参数给scheduleTask最后计算通过Promise机制返回异步处理。内部通过require关联对应的功能函数,并替换onmessage函数。

cesium的底层实现 :

原理篇 : https://www.cnblogs.com/fuckgiser/p/5869122.html