JavaScript中的Web worker多线程API研究


Posted in Javascript onDecember 06, 2014

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就可以跑起来)。

Javascript 相关文章推荐
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
JS匿名函数实例分析
Nov 26 Javascript
jquery validation验证表单插件
Jan 07 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 #Javascript
JavaScript实现twitter puddles算法实例
Dec 06 #Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 #Javascript
angularjs中的e2e测试实例
Dec 06 #Javascript
angularjs中的单元测试实例
Dec 06 #Javascript
angularjs指令中的compile与link函数详解
Dec 06 #Javascript
angularjs的一些优化小技巧
Dec 06 #Javascript
You might like
PHP的分页功能
2007/03/21 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
学习vue.js计算属性
2016/12/03 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
Servlet的生命周期
2013/08/25 面试题
财务会计专业毕业生自荐信
2013/10/19 职场文书
师范生个人推荐信
2013/11/29 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
珠宝店促销方案
2014/03/21 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
保护环境建议书400字
2014/05/13 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers