当主要的耗时操作都在操作dom的时候,webWorker是无能为力的
Worker是浏览器为js新开的一个线程,可以不影响当前页面的情况下,在另外的线程中执行计算并把结果回传给主线程.
一.专用Worker
交互通信过程通过onmessage和postMessage方法
主线程main.js , 子线程myWorker.js
主线程发送消息到子线程和主线程接收子线程的消息
var myWorker = new Worker('myWorker.js');
// 主线程发送消息到子线程
myWorker.postMessage(obj);
// 主线程接收子线程的消息
myWorker.onmessage = function (e) {
console.log(e);
};
子线程发送消息和接收消息
// 子线程接收消息
onmessage = function (e) {
console.log(e);
};
// 子线程发送消息
postMessage([{syc:'text1'},{syc:'text2'},{syc:'text3'}]);
主线程监听子线程的错误信息
myWorker.addEventListener('error',function (e) {
console.error(e.filename);
console.error(e.message);
console.error(e.lineno);
});
完整的例子
main.js
// 检测浏览器是否支持Worker
if (window.Worker) {
var myWorker = new Worker('myWorker.js');
myWorker.onmessage = function (e) {
console.log(e);
};
var obj = {
number:100,
arr:[{text:1},{text:1}],
b:true,
str:'string'
};
myWorker.addEventListener('error',function (e) {
console.error(e.filename);
console.error(e.message);
console.error(e.lineno);
});
myWorker.postMessage(obj);
} else {
alert("浏览器不支持Worker");
}
myWorker.js
onmessage = function (e) {
console.log(e);
};
console.log(self);
postMessage([{syc:'text1'},{syc:'text2'},{syc:'text3'}]);
throw new Error('myWorker 主动抛出错误');
postMessage([1,2,3]);
postMessage(123);
二.共享Worker
共享Worker和专用Worker有相同的API,但是,共享Worker要在一个确切打开的端口中通信,也就是端口必须被显示的打开,而打开的方式就是使用onmessage事件,或者显示的调用start方法.若是使用start方法显示打开的端口,此时若要主线程和共享子线程双向通信就要在子线程中也调用start.
main.js
if(window.SharedWorker){
var sw = new SharedWorker('./sharedWorker.js');
// sw.port.start();
sw.port.postMessage(2);
sw.port.onmessage = function (e) {
console.log(e);
}
} else {
alert("浏览器不支持Worker");
}
main2.js
if(window.SharedWorker){
var sw = new SharedWorker('./sharedWorker.js');
// sw.port.start();
sw.port.postMessage(1);
sw.port.onmessage = function (e) {
console.log(e);
}
} else {
alert("浏览器不支持Worker");
}
sharedWorker.js
onconnect = function (e) {
var port = e.ports[0];
port.onmessage = function (e) {
console.log(e.data);
port.postMessage('sharedWorker发送了消息'+e.data);
};
// port.start();
}