聚合国内IT技术精华文章,分享IT技术精华,帮助IT从业人士成长

Web Worker多线程的研究

2013-06-07 17:31 浏览: 764137 次 我要评论(0 条) 字号:

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

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

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

得到的结果可以发现,线程中得到的data的id增加了,但是传回来之后,并没有改变主线程的bundle中的id,因此,线程中传递的对象实际上copy了一份,这样的话,线程并没有共享数据,避免了读写冲突,所以是安全的。保证线程安全的代价就是限制了在线程中操作主线程对象的能力。
这样一个有限的多线程机制使用起来是很不方便的,我们当然希望Worker能够支持让代码看起来具有同时操作多线程的能力,例如,支持看起来像下面这个样子的代码:

  1. var worker = new ThreadWorker(bundle /*shared obj*/);
  2.  
  3. worker.run(function(bundle){
  4.     //do sth in worker thread...
  5.     this.runOnUiThread(function(bundle /*shared obj*/){
  6.         //do sth in main ui thread...
  7.     });
  8.     //...
  9. });

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

  1. function WorkerThread(sharedObj){
  2.     this._worker = new Worker("thread.js");
  3.     this._completes = {};
  4.     this._task_id = 0;
  5.     this.sharedObj = sharedObj;
  6.  
  7.     var self = this;
  8.     this._worker.onmessage = function(evt){
  9.         var ret = evt.data;
  10.         if(ret.__UI_TASK__){
  11.             //run on ui task
  12.             var fn = (new Function("return "+ret.__UI_TASK__))();
  13.             fn(ret.sharedObj);
  14.         }else{
  15.             self.sharedObj = ret.sharedObj;
  16.             self._completes[ret.taskId](ret);
  17.         }
  18.     }
  19. }
  20.  
  21. WorkerThread.prototype.run = function(task, complete){
  22.     var _task = {__THREAD_TASK__:task.toString(), sharedObj: this.sharedObj, taskId: this._task_id};
  23.     this._completes[this._task_id++] = complete;
  24.     this._worker.postMessage(_task);
  25. }

上面这段代码定义了一个ThreadWorker对象,这个对象创建了一个运行thread.js的Web Worker,保存了共享对象SharedObj,并且对thread.js发回的消息进行处理。
如果thread.js中传回了一个__UI_TASK__消息,那么运行这个消息传过来的function,否则执行run的complete回调
我们看看thread.js是怎么写的:

  1. onmessage = function(evt){
  2.     var data = evt.data;
  3.  
  4.     if(data && data.__THREAD_TASK__){
  5.         var task = data.__THREAD_TASK__;
  6.         try{
  7.             var fn = (new Function("return "+task))();
  8.  
  9.             var ctx = {
  10.                 threadSignal: true,
  11.                 sleep: function(interval){
  12.                     ctx.threadSignal = false;
  13.                     setTimeout(_run, interval);
  14.                 },
  15.                 runOnUiThread: function(task){
  16.                     postMessage({__UI_TASK__:task.toString(), sharedObj:data.sharedObj});
  17.                 }
  18.             }
  19.  
  20.             function _run(){
  21.                 ctx.threadSignal = true;
  22.                 var ret = fn.call(ctx, data.sharedObj);
  23.                 postMessage({error:null, returnValue:ret, __THREAD_TASK__:task, sharedObj:data.sharedObj, taskId: data.taskId});
  24.             }
  25.  
  26.             _run(0);
  27.  
  28.         }catch(ex){
  29.             postMessage({error:ex.toString() , returnValue:null, sharedObj: data.sharedObj});
  30.         }
  31.     }
  32. }

可以看到,thread.js接收ui线程传过来的消息,其中最重要的是__THREAD_TASK__,这是ui线程传过来的需要worker线程执行的“任务”,由于function是不可序列化的,因此传递的是字符串,worker线程通过解析字符串成function来执行主线程提交的任务(注意在任务中将共享对象sharedObj传入),执行完成后将返回结果通过message传给ui线程。我们仔细看一下除了返回值returnValue以外,共享对象sharedObj也会被传回,传回时,由于worker线程和ui线程并不共享对象,因为我们认为通过赋值的方式同步两边的对象(这样是否线程安全?为什么?)
可以看到整个过程其实并不复杂,这么实现之后,这个ThreadWorker可以有以下两种用法:

  1. var t1 = new WorkerThread({i: 100} /*shared obj*/);
  2.  
  3.         setInterval(function(){
  4.             t1.run(function(sharedObj){
  5.                     return sharedObj.i++;
  6.                 },
  7.                 function(r){
  8.                     console.log("t1>" + r.returnValue + ":" + r.error);
  9.                 }
  10.             );
  11.         }, 500);
  1. var t2 = new WorkerThread({i: 50});
  2.        
  3.         t2.run(function(sharedObj){   
  4.             while(this.threadSignal){
  5.                 sharedObj.i++;
  6.  
  7.                 this.runOnUiThread(function(sharedObj){
  8.                     W("body ul").appendChild("<li>"+sharedObj.i+"</li>");
  9.                 });
  10.                
  11.                 this.sleep(500);
  12.             }
  13.             return sharedObj.i;
  14.         }, function(r){
  15.             console.log("t2>" + r.returnValue + ":" + r.error);
  16.         });

这样的用法从形式和语义上来说都让代码具有良好的结构,灵活性和可维护性。

好了,关于Web Worker的用法探讨就介绍到这里,有兴趣的同学可以去看一下这个项目:https://github.com/akira-cn/WorkerThread.js (由于Worker需要用服务器测试,我特意在项目中放了一个山寨的httpd.js,是个非常简陋的http服务的js,直接用node就可以跑起来)。



网友评论已有0条评论, 我也要评论

发表评论

*

* (保密)

Ctrl+Enter 快捷回复