JavaScript中的Web worker多线程API研究

时间: 作者:八集

  

[JavaScript,Web,worker,多线程,API]JavaScript中的Web worker多线程API研究

  

HTML5支持了Web Worker这样的API,允许网页在安全的情况下执行多线程代码。不过Web Worker实际上受到很多限制,因为它无法真正意义上共享内存数据,只能通过消息来做状态通知,所以甚至不能称之为真正意义上的“多线程”。

  

  

Web Worker的接口使用起来很不方便,它基本上自带一个sandbox,在沙箱中跑一个独立的js文件,通过 postMessage和 onMessge来和主线程通信:  

  

代码如下:

  
  var worker = new Worker("my.js");  
  var bundle = {message:'Hello world', id:1};  
  worker.postMessage(bundle); //postMessage可以传一个可序列化的对象过去  
  worker.onmessage = function(evt){  
  console.log(evt.data); //比较worker中传回来的对象和主线程中的对象  
  console.log(bundle); //{message:'Hello world', id:1}  
  }  
  
  

  

代码如下:

  
  //in my.js  
  onmessage = function(evt){  
  var data = evt.data;  
  data.id++;  
  postMessage(data); //{message:'Hello world', id:2}  
  }  
  
  

  

得到的结果可以发现,线程中得到的data的id增加了,但是传回来之后,并没有改变主线程的bundle中的id,因此,线程中传递的对象实际上copy了一份,这样的话,线程并没有共享数据,避免了读写冲突,所以是安全的。保证线程安全的代价就是限制了在线程中操作主线程对象的能力。

  

  

这样一个有限的多线程机制使用起来是很不方便的,我们当然希望Worker能够支持让代码看起来具有同时操作多线程的能力,例如,支持看起来像下面这个样子的代码:  

  

代码如下:

  
  var worker = new ThreadWorker(bundle /*shared obj*/);  

  

worker.run(function(bundle){  
  //do sth in worker thread...

  
  this.runOnUiThread(function(bundle /*shared obj*/){  
  //do sth in main ui thread...

  
  });  
  //...

  
  });  
  

  

  

这段代码里面,我们启动一个worker之后,能够让任意代码跑在worker中,并且当需要操作ui线程(比如读写dom)时,可以通过this.runOnUiThread回到主线程执行。

  

  

那么如何实现这个机制呢? 看下面的代码:  

  

代码如下:

  
  function WorkerThread(sharedObj){  
  this._worker = new Worker("thread.js");  
  this._completes = {};  
  this._task_id = 0;  
  this.sharedObj = sharedObj;  

  

var self = this;  
  this._worker.onmessage = function(evt){  
  var ret = evt.data;  
  if(ret.__UI_TASK__){  
  //run on ui task  
  var fn = (new Function("return "+ret.__UI_TASK__))();  
  fn(ret.sharedObj);  
  }else{  
  self.sharedObj = ret.sharedObj;  
  self._completes[ret.taskId](ret);  
  }  
  }  
  }  

  

WorkerThread.prototype.run = function(task, complete){  
  var _task = {__THREAD_TASK__:task.toString(), sharedObj: this.sharedObj, taskId: this._task_id};  
  this._completes[this._task_id++] = complete;  
  this._worker.postMessage(_task);  
  }  
  

  

  

上面这段代码定义了一个ThreadWorker对象,这个对象创建了一个运行thread.js的Web Worker,保存了共享对象SharedObj,并且对thread.js发回的消息进行处理。

  

  

如果thread.js中传回了一个UI_TASK消息,那么运行这个消息传过来的function,否则执行run的complete回调 我们看看thread.js是怎么写的:  

  

代码如下:

  
  onmessage = function(evt){  
  var data = evt.data;  

  

if(data && data.__THREAD_TASK__){  
  var task = data.__THREAD_TASK__;  
  try{  
  var fn = (new Function("return "+task))();  

  

var ctx = {  
  threadSignal: true,  
  sleep: function(interval){  
  ctx.threadSignal = false;  
  setTimeout(_run, interval);  
  },  
  runOnUiThread: function(task){  
  postMessage({__UI_TASK__:task.toString(), sharedObj:data.sharedObj});  
  }   (责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台