在項(xiàng)目中有時(shí)會(huì)遇到這種情況响委，在客戶(hù)端需要處理計(jì)算量很大的腳本時(shí)褥紫，會(huì)導(dǎo)致頁(yè)面的卡死，時(shí)間長(zhǎng)了瀏覽器還會(huì)彈出提示是否繼續(xù)運(yùn)行腳本冬筒，這樣用戶(hù)的體驗(yàn)就會(huì)很差恐锣，需要等待腳本執(zhí)行完后才能執(zhí)行后續(xù)的操作，HTML5的Web Workers 可以在客戶(hù)端后臺(tái)創(chuàng)建多個(gè)進(jìn)程來(lái)處理這些任務(wù)舞痰，這樣前端頁(yè)面不會(huì)影響用戶(hù)的使用土榴，同時(shí)也可以利用用戶(hù)的多核CPU來(lái)處理繁重的計(jì)算任務(wù)而不用加重服務(wù)器端的壓力。
下面是一個(gè)簡(jiǎn)單的web workers的例子
檢測(cè)瀏覽器是否支持Web Workers
if (typeof(Worker) != "undefined"){
console.log("supports Web Workers");
}
else{
console.log("not supports Web Workers");
}
html中的JS部分
function load(){
var worker = new Worker("js/work.js");
worker.addEventListener("message", function (e)
{
console.log("接收到的信息：" + e.data);
}, true);
worker.postMessage("傳給worker的數(shù)據(jù)");
}
document.addEventListener("load", load, true);
workers中的JS部分
addEventListener("message", function (e){
console.log(e.data);
var j = 0;
for (var i = 0; i < 100000000000000000; i++){
j = j + 1;
}
postMessage("傳回來(lái)的數(shù)據(jù)");
}, true);
這樣后臺(tái)workers在執(zhí)行循環(huán)計(jì)算工作响牛，前端html還是可以正常訪問(wèn)鞭衩，當(dāng)后臺(tái)計(jì)算完成之后會(huì)將計(jì)算結(jié)果傳回前端頁(yè)面
