Web Workers

在项目中有时会遇到这种情况，在客户端需要处理计算量很大的脚本时，会导致页面的卡死，时间长了浏览器还会弹出提示是否继续运行脚本，这样用户的体验就会很差，需要等待脚本执行完后才能执行后续的操作，HTML5的Web Workers 可以在客户端后台创建多个进程来处理这些任务，这样前端页面不会影响用户的使用，同时也可以利用用户的多核CPU来处理繁重的计算任务而不用加重服务器端的压力。
下面是一个简单的web workers的例子
检测浏览器是否支持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的数据");
}
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("传回来的数据");
}, true);

这样后台workers在执行循环计算工作，前端html还是可以正常访问，当后台计算完成之后会将计算结果传回前端页面