HTML5 web worker


web worker是运行在后台的javascript,javascript是单线程的,当需要处理的运算,比如复杂的排序时候,页面就会出现卡顿,这个时候就需要web worker在后台进行运算把结果返回来,这样主页面就不会出现卡顿现象
1.创建web-worker
var w = new worker('sum.js')
在sum.js中使用postMeesage方法向其发送数据,这个脚本运行的环境比较特殊,其中的self就指示 web worker 本身,当有给这个web worker 发生信息以后,就会触发它的 message 事件,这个事件对象的data属性中就包含发送来的数据,对数据处理完毕后可以同样使用postMessage方法将数据发送回去。

为了收到web worker 发回来的数据,就需要监听web worker 对象的onmessage事件,其次为了检查错误还需要监听onerror事件。

w.onmessage = function (event) {
  console.log(event.data)
}
w.onerror = function () {
  console.log("ERROR: " + event.filename + " (" + event.lineno + "): " +event.message);
}

 以下为web worker内容

var sum = 0;
function timedCount () {
  for (var i = 0; i < 100; i++) {
     for (var j = 0; j < 100000000; j++) {
       sum += 1
     }
  }
  // 将得到的sum发送回主线程
  postMessage(sum);
}
// 将执行timedCount前的时间,通过postMessage发送回主线程
postMessage('Before computing, '+ sum);
timedCount();
// 结束timedCount后,将结束时间发送回主线程
postMessage('After computing, ' + sum);

2.终止 Web Worker
w.terminate();

 

posted @ 2017-09-11 19:51  RunningAndRunning  阅读(120)  评论(0编辑  收藏  举报