html5的webWorker学习

当主要的耗时操作都在操作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();
}