WebWork实例

一般来说Javascript和页面的UI会共用一个线程，所以当点击一个按钮开始运行Javascript后，在这段代码运行完毕之前，页面是无法响应用户操作的，换句话来说就是被“冻结”了。而这段代码可以交给Web Worker在后台运行，那么页面在Javascript运行期间依然可以响应用户操作。后台会启动一个worker线程来执行这段代码，用户可以创建多个worker线程。所以你可以在前台做一些小规模分布式计算之类的工作，不过Web Worker有以下一些使用限制：
Web Worker无法访问DOM节点；
Web Worker无法访问全局变量或是全局函数；
Web Worker无法调用alert()或者confirm之类的函数；
Web Worker无法访问window、document之类的浏览器全局变量；
不过Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数，也可以使用XMLHttpRequest对象来做Ajax通信。

1.webwork简单实例

父进程.html

//检测浏览器是否支持 Web Worker
        if (typeof (Worker) !== "undefined") {

            //创建 Web Worker 对象
            if (typeof (w) == "undefined") {
                w = new Worker("../../../Resources/JavaScript/webworker.js");
                w.postMessage("测试");
            }
            w.onmessage = function (event) {
                console.log(event.data);
            };
        }
        else {
            console.log("浏览器不支持Web Worker");
        }

子进程webworker.js

//当收到父进程传递过来的消息时，子进程响应，发回数据
onmessage = function (e) {
    var res = e.data + "帅气！";
    postMessage(res);
    this.close();//关闭子进程
}

输出结果：

image.png

2.Web Worker使用XMLHttpRequest与服务端通信

addEventListener("message", function(evt){  
var xhr = new XMLHttpRequest();  
xhr.open("GET", "lengthytaskhandler.ashx");  
xhr.onload = function(){  
postMessage(xhr.responseText);  
};  
xhr.send();  
},false);