美文网首页
WebWork实例

WebWork实例

作者: 落云一朵 | 来源:发表于2017-11-17 12:31 被阅读161次

    一般来说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);  
    

    相关文章

      网友评论

          本文标题:WebWork实例

          本文链接:https://www.haomeiwen.com/subject/jjclvxtx.html