在项目中有时会遇到这种情况,在客户端需要处理计算量很大的脚本时,会导致页面的卡死,时间长了浏览器还会弹出提示是否继续运行脚本,这样用户的体验就会很差,需要等待脚本执行完后才能执行后续的操作,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还是可以正常访问,当后台计算完成之后会将计算结果传回前端页面