一.简介
webworker是js中为了解决计算量过大需要花较多时间阻碍主线程执行而设计的 在js中使用如下：
- 新建一个webworker:
const myWorker = new Worker("worker.js");
- 向worker发送数据：
myWorker.postMessage([first.value, second.value]);
- 新建一个worker.js，写入以下代码：
onmessage = (e) => {
console.log("Message received from main script");
const workerResult = `Result: ${e.data[0] * e.data[1]}`;
console.log("Posting message back to main script");
postMessage(workerResult);
};
- 在主线程接收返回的结果：
myWorker.onmessage = (e) => {
result.textContent = e.data;
console.log("Message received from worker");
};
二.在cesium中使用
cesium对webworker做了封装，封装了一个TaskProcessor类,使用方法如下：
- 新建test.js文件放在workers文件夹下,需要引入
createTaskProcessorWorker：
define(['./createTaskProcessorWorker',], (function (createTaskProcessorWorker) { 'use strict';
function test(packedParameters, transferableObjects) {
return {
packedParameters:JSON.stringify(packedParameters),
}
}
var test = createTaskProcessorWorker(test);
return test;
}))
- 主线程中调用
const uInt8Array = new Uint8Array(1024 * 1024 * 8).map((v, i) => i);
console.log(uInt8Array.byteLength)
//test是js文件名称
var taskProcessor = new Cesium.TaskProcessor('test');
var promise = taskProcessor.scheduleTask({name:'111',data:uInt8Array},[uInt8Array.buffer]);
if (Cesium.defined(promise)) {
promise.then(res=>{
console.log(res)
})
}
输出结果：
3.
[uInt8Array.buffer]的解释，
在代码中scheduleTask出现了第二个参数，api的解释是：
这个参数叫做
可转移对象，简单来说就是webworker为了解决大计算量而生，那么很多情况下需要发送大数据过去，这个发送过去默认情况其实是对数据的拷贝，但是这样就会浪费空间和时间，这个参数可以指示是使用拷贝传递还是引用传递，使用引用传递可以提高效率，节约内存，但是上下文就改变了，即传递给worker之后,uInt8Array无法再修改，详细解释在这：可转移对象 - Web API 接口参考 | MDN (mozilla.org)
