web workers工作线程

web worker工作线程是Html5里面提出来的一个新api,对于JavaScript我们的印象是单线程执行,如果运行复杂运算的时候,页面可能就会失去响应,
是运行在后台的javascript,独立于其他脚本 ,创建后,会在后台执行,并不会影响浏览器对于页面的响应

方法:postMessage()用于向html页面传回一段消息,
terminate()——终止web worker并释放浏览器/计算机资源

事件:onmessage</p>

使用:直接new一个出来,接收一个指向执行的javascript代码的地址。通过worker实例的onmessage方法可以接受工作线程发送过来的响应信息
工作线程通过postMessage可以向主线程发送消息,但是注意,这里的postMessage只接受一个参数
最后工作线程创建出来,如果不用了记得把他干掉work.terminate()

示例html代码如下:
    <div id="numDiv">0</div>
    <button id="start">start</button>
    <button id="stop">stop</button>

js代码如下:

/**
 * Created by wwtliu on 14/8/16.
 */
var numDiv;
var work = null;

window.onload = function(){
    numDiv = document.getElementById("numDiv");

    document.getElementById("start").onclick = startWorker;
    document.getElementById("stop").onclick = function(){
        if(work){
//             Terminate()在以下多种情况下可以被调用:
// 1.     当发送一个异常,并且构造函数产生异常。
// 2.     当产生一个异常,或者析构函数发送一个异常。
// 3.     一个静态对象的析构或构造函数发送一个异常。
// 4.     以atexit注册的函数发生异常的时候。
// 5.     当你自行编写一个异常,但实际上没有异常产生的时候。
// 6.     当调用缺省的unexpected()函数时。
            work.terminate();
            work = null;
        }
    }
}

function startWorker(){
    if(work){
        return;
    }
    work = new Worker("count.js");
    work.onmessage = function(e){
        numDiv.innerHTML = e.data;
    }
}

工作线程代码如下:

 /**
 * Created by wwtliu on 14/8/16.
 */

var countNum = 0;
function count(){
    postMessage(countNum);
    countNum++;
    setTimeout(count,1000);
}

count();



原文地址:https://www.cnblogs.com/chooper/p/6530076.html