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();
}