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(
+sharedobj.i+);
                });                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就可以跑起来）。