Web Worker的效率

web worker javascript

greenriver 2022-06-06 11:59:40 ‧ 1186 瀏覽

分享至

想請問大大，
為什麼我使用web worker，程式碼執行效率反而更慢呢?
我是用chrome測試的。

//index.js
let num = 100000000;
let date = new Date().getTime();

//傳給web worker
let worker = new Worker('demo_workers.js');
worker.postMessage([num,date])
worker.onmessage = (e) =>{
    date = new Date().getTime()-e.data[1];
    console.log('結果二',e.data[0],'結果二的date',date);
}

const countFunction = function(e){
    let total=0;
    for (let index = 0; index < e; index++) {
        total = total+index    
    }
    return total;
}(num)
date = new Date().getTime()-date;
console.log('結果一',countFunction,'結果一的date',date);

//demo_workers.js
onmessage = function (e) {
    let total = 0;
    for (let index = 0; index < e.data[0]; index++) {
        total = total + index
    }
    postMessage([total,e.data[1]]);
};

結果顯示:

//console.log的結果
結果一 4999999950000000 結果一的date 96
結果二 4999999950000000 結果二的date 13282

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

淺水員

iT邦大師 6 級 ‧ 2022-06-06 14:17:54

最佳解答

試試看這樣，差距會縮短很多

onmessage = function (e) {
    let total = 0;
    let n = e.data[0]; // cache e.data[0]
    for (let index = 0; index < n; index++) {
        total = total + index
    }
    postMessage([total,e.data[1]]);
};

另外可以試試看把順序調換一下，避免同時執行互相影響
像是下面這樣出來的結果就非常接近了

// index.js
let num = 100000000;

//先測試直接運算
function countFunction(e) {
    let total = 0;
    for (let index = 0; index < e; index++) {
        total = total + index
    }
    return total;
};
let date = new Date().getTime();
let result1 = countFunction(num);
date = new Date().getTime() - date;
console.log('結果一', result1, '結果一的date', date);

//再測試 web worker
let worker = new Worker('demo_workers.js');
worker.onmessage = (e) => {
    date = new Date().getTime() - date;
    console.log('結果二', e.data, '結果二的date', date);
}
date = new Date().getTime();
worker.postMessage(num);

//demo_workers.js
onmessage = function (e) {
    let total = 0;
    let n = e.data;
    for (let index = 0; index < n; index++) {
        total = total + index
    }
    postMessage(total);
};

其實 web worker 主要是可以把複雜運算丟給另一個執行續
這時候主執行續還是可以做其它事情

所謂的「快」是指兩個人可以同時做事
而不是 web worker 會跑比較快