html5 web worker学习笔记（记一）

　　（吐槽：浏览器js终于进入多线程时代！）

 

　　以前利用setTimeout、setInterval等方式的多线程，是伪多线程，本质上是一种在单线程中进行队列执行的方式。自从html5 web worker出现，js真正进入了多线程编程时期，现在就开始js的“真·多线程”秘籍修炼吧！

 

最近因为工作中的需要，使用了html5的web worker，之前一直对worker一知半解。直到看到IBM上的一篇博文（知识不是完全有效，可以当作参考），才对worker有了基本概念。

 

worker分类

 worker分为专用线程和共享线程。专用线程只能在当前页面中访问到。而如果要多个页面访问同一个worker，就要使用共享线程，但前提是这几个页面是同域的。

 

worker基本用法

一、专用线程

　　1、在浏览器线程中（即插入页面的js代码，内联、外链的js代码都可以）：

var worker=new Worker("testWorker.js");

worker.onmessage=function(event){
　　/*收到worker线程发送来的数据*/
　　console.log(event.data);
};

worker.onerror=function(event){
　　/*收到worker线程发送来的错误信息*/
　　console.log(event.data);
};

worker.postMessage("some data");/*向worker线程发送数据*/

　　　　　　worker一直处于监听状态，要释放这个线程必须在浏览器线程调用worker.terminate();以释放资源。

　　2、在worker线程代码中：

this.onmessage=function(event){
      /*收到浏览器线程发来的信息，然后回复浏览器线程*/
      this.postMessage("worker received data:"+event.data+"("+new Date()+")";
};

　　　　　　在worker线程中，如果不用接收浏览器线程发来数据或者浏览器线程不发送数据，则可以直接执行处理，最后this.postMessage(/*data*/)就行了。

　　　　　　在上例中，this指线程对象，所以最好的用法是在第一行代码的前面加上“var thread=this;”,然后就可以在任何地方使用thread.postMessage和thread.onmessage方法。worker线程中的代码变成：

var thread=this;
thread.onmessage=function(event){
      /*收到浏览器线程发来的信息，然后回复浏览器线程*/
      thread.postMessage("worker received data:"+event.data+"("+new Date()+")";
};

 

二、共享线程

　　1、浏览器线程中：

 

var sharedWorker=new SharedWorker("sharedWorker.js");

worker.onerror=function(e){
    /*worker对象错误*/
    console.log("create shared worker error.");
};
worker.port.onmessage=function(event){
    console.log(event.data);
};
worker.port.onerror=function(e){
     /*worker通信、worker线程中的错误*/
    console.log(e.message);
};
        
worker.port.start();/*必须执行start以开始连接*/

　　　　在浏览器线程中，通信是通过worker的port对象进行的，每一个页面的port是不同的，具有唯一性。最关键的一点是start()，这个函数表示开始连接shared worker，连接成功时，worker线程将增加一个连接数。

　　　　在同域下的其他页面调用此shared worker，代码结构与此相同，只是处理数据的逻辑可能不同。

 

　　2、worker线程中：

var thread=this,
    connectionCount=0;
thread.onconnect=function(e) {
    /*有页面请求连接触发*/
    var port=e.ports[0];/*获取指定页面的port，用这个port和页面通信*/
    port.postMessage("new connection,index:"+connectionCount);
    port.onmessage=function(event) {
        port.postMessage("received data:"+event.data);
    };
    connectionCount++;
};

　　　　在worker代码中，在onconnect回调函数中获取请求连接者的连接对象port，然后就可以通过这个port与请求者通信。

　　　　在这里，可以把port缓存起来，以后worker可以随时主动postMessage给浏览器特定的页面线程。这需要页面发送自己的“全局唯一特征码”供worker识别。

 

生命周期

　　专用线程的生命周期与页面的生命周期一致，可以使用worker.terminate()关闭释放线程。

　　共享线程的生命周期与其连接数相关，当连接数为0时，将自动关闭释放。如果需要关闭当前页面的连接，可以调用worker.port.close()，worker线程中的连接数将减少一个。关闭页面也和调用worker.port.close具有同样的影响。

 

尾记

　　1、worker也和服务器端的多线程一样，创建、销毁开销较大。所以，worker只应该用于耗时操作，例如复杂、长时间的运算。

　　2、worker不能访问DOM及页面相关对象如window document，这也在一定程度上限制了worker的应用，也不能在worker中创建worker。

　　3、worker中可以使用XMLHttpRequest，可以自己写一个包装http请求的对象到worker线程代码中，或者找个开源的http库。使用开源库需要解决如何引入的问题，还没有研究。

　　4、可以动态创建worker代码。提供思路，具体怎么做的忘了:)       ------------      将需要运行的代码转换为字符串，再转换为二进制的Blob对象，再使用window.URL.createObjectURL创建动态url，参数是Blob对象，然后将这个动态url传入worker的构造函数，作为第一个参数。这种一般是用在专用线程上。例子如下。

var doWorkByHtml5Worker = (function () {
        //使用html5的worker进行后台耗时耗Cpu计算
        var worker, urlContext = window.URL || window.webkitURL || window.mozURL || window.msURL;
        var blobBuilder, blobBuilderContext = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
        if (blobBuilderContext) {
            var clearBlob = function () {
                blobBuilder = null;
                blobBuilder = new blobBuilderContext();
                blobBuilder.clear = clearBlob;
            };
            clearBlob();
        } else if (Blob) {
            blobBuilder = {
                builder: null,
                append: function (str) {
                    this.builder = new Blob([str]);
                },
                getBlob: function () {
                    return this.builder;
                },
                clear: function () {
                    this.builder = null;
                }
            }
        }

        return {
            /*
            * workFunc为需要运行的函数，可以是字符串，也可以是原型函数，如果是函数，将在内部转换为字符串。必须为函数形式。
            * params为需要传入函数的参数
            * callback为执行完毕的回调函数，参数为执行workFunc返回的值
            */
            Do: function (workFunc, params, callback) {
                var workStr = workFunc.toString();
                if (workFunc !== workStr) {
                    workFunc = workStr;
                }
                blobBuilder.append('postMessage((' + workFunc.toString() + ')(' + JSON.stringify(params) + '));');
                worker = new Worker(urlContext.createObjectURL(blobBuilder.getBlob()));
                worker.onmessage = function (e) {
                    this.terminate();
                    worker = null;
                    blobBuilder.clear();
                    callback && callback(e.data);
                };
            }
        };
    })();

　　使用：

/*基本演示*/
doWorkByHtml5Worker.Do(
    function(){
        return "data from custom function";
    },
    null,
    function(data){
        /*回调*/
        console.log(data);/*将打印字符串"data from custom function"*/
    }
);

/*带参数演示*/
doWorkByHtml5Worker.Do(
    function(obj){
        return "received object:{id:"+obj.id+",msg:\""+obj.msg+"\"}";
    },
    {id:0,msg:"go home"},
    function(data){
        /*回调*/
        console.log(data);/*将打印字符串"received object:{id:0,msg:"go home"}"*/
    }
);

/*传入字符串型执行函数*/
var doSomething=(function(){
    return "data from custom function";
}).toString();
/* 或者：var doSomething="function(){return \"data from custom function\";}";*/
doWorkByHtml5Worker.Do(
    doSomething,
    null,
    function(data){
        /*回调*/
        console.log(data);/*将打印字符串"data from custom function"*/
    }
);

 

 

参考：

1、菜鸟教程

2、IBM博文

3、W3C文档