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});
}
}
function _run(){
ctx.threadSignal = true;
var ret = fn.call(ctx, data.sharedObj);
postMessage({error:null, returnValue:ret, __THREAD_TASK__:task, sharedObj:data.sharedObj, taskId: data.taskId});
}
_run(0);
}catch(ex){
postMessage({error:ex.toString() , returnValue:null, sharedObj: data.sharedObj});
}
}
}
可以看到，thread.js接收ui线程传过来的消息，其中最重要的是THREAD_TASK，这是ui线程传过来的需要worker线程执行的“任务”，由于function是不可序列化的，因此传递的是字符串，worker线程通过解析字符串成function来执行主线程提交的任务（注意在任务中将共享对象sharedObj传入），执行完成后将返回结果通过message传给ui线程。我们仔细看一下除了返回值returnValue以外，共享对象sharedObj也会被传回，传回时，由于worker线程和ui线程并不共享对象，因此我们人为通过赋值的方式同步两边的对象（这样是否线程安全？为什么？）
可以看到整个过程其实并不复杂，这么实现之后，这个ThreadWorker可以有以下两种用法：
var t1 = new WorkerThread({i: 100} /*shared obj*/);
setInterval(function(){
t1.run(function(sharedObj){
return sharedObj.i++;
},
function(r){
console.log("t1>" + r.returnValue + ":" + r.error);
}
);
}, 500);
var t2 = new WorkerThread({i: 50});
t2.run(function(sharedObj){
while(this.threadSignal){
sharedObj.i++;
this.runOnUiThread(function(sharedObj){
W("body ul").appendChild("<li>"+sharedObj.i+"</li>");
});
this.sleep(500);
}
return sharedObj.i;
}, function(r){
console.log("t2>" + r.returnValue + ":" + r.error);
});
这样的用法从形式和语义上来说都让代码具有良好的结构，灵活性和可维护性。
好了，关于Web Worker的用法探讨就介绍到这里，有兴趣的同学可以去看一下这个项目：https://github.com/akira-cn/WorkerThread.js (由于Worker需要用服务器测试，我特意在项目中放了一个山寨的httpd.js，是个非常简陋的http服务的js，直接用node就可以跑起来）。
相关文章
这篇文章主要为大家详细介绍一下微信小程序实现页面导航的几种方法以及帮助大家掌握如何使用页面之间的导航跳转，感兴趣的可以了解一下2022-07-07
这篇文章给大家分享了JavaScript实现仿Clock ISO时钟的方法以及实例代码，有兴趣的朋友参考学习下下。2018-06-06
这篇文章主要介绍了使用JavaScript轻松实现拖拽功能,让你的网页动起来,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了浅谈JS获取元素的N种方法及其动静态讨论,非常具有实用价值，需要的朋友可以参考下2017-08-08
第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢，只能算是加分项。废话不多说了，还是继续博文吧。2010-10-10
foreach和map都是JavaScript中数组的常用方法,它们都可以对数组中的每个元素执行一个函数,但是它们有一些区别,下面这篇文章主要给大家介绍了关于JavaScript中forEach和map详细讲解的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了前端深入理解Typescript泛型概念，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
平移和缩放是查看图像时常用的功能,我们可以放大图像以查看更多细节,进行图像编辑,Dynamsoft Document Viewer是一个用于此目的的SDK,它为文档图像提供了一组查看器,在本文中,我们将演示如何使用它来平移和缩放图像,需要的朋友可以参考下2024-08-08
今天小编就为大家分享一篇layer ui 导入文件之前传入数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JS基于面向对象实现的选项卡效果,结合实例形式分析了javascript基于面向对象技术动态操作页面元素的流程与相关注意事项,需要的朋友可以参考下2016-12-12
最新评论