WebWorker：提升网页响应速度的神器，让你的网页拥有超能力

现在，WebWorker这东西在网页开发里越来越重要了。它就是让我们在浏览器后台跑代码，而且不会影响到页面的响应速度。今儿个就跟大伙儿聊聊我对WebWorker的理解和使用心得，希望能给大家带来点启发。

var myWorker = new Worker("my_task.js");
myWorker.onmessage = function (oEvent) {
  console.log("Called back by the worker!n");
};

WebWorkers的基本概念

var myWorker = new Worker("my_task.js");
myWorker.addEventListener("message", function (oEvent) {
  console.log("Called back by the worker!n");
}, false);
myWorker.postMessage(""); // start the worker.

WebWorkers就是让你的网页有超能力的神器！它能把耗时的运算搬到后头去完成，保住页面的交互速度不掉队。每次用上都觉得像换了新电脑似的，卡得要死的网页瞬间流畅了不少。

建立个WebWorker超简单，只用把`Worker()`造出来，再填上脚本的链接就行。要收到worker发过来的信息，得设好`onmessage`属性或给`addEventListener`加把劲儿监听消息事件咯。这样就能轻松和后台线程聊天唠嗑，真的是太神奇！

    webWorkers 实例演示
    请输入要求和的数：

    
    
        //1.创建计算的子线程
        var worker = new Worker("worker1.js");        function caculate(){
            var num = parseInt(document.querySelector('#num').value,10);            //2.将数据传递给子线程
            worker.postMessage(num);
        }        //3.从子线程接收处理结果并展示
        worker.onmessage = function(event){
            alert('总和为：'+ event.data);
        }

onmessage = function(event){
    var result =0,
    num  = event.data;    for(var i = 1; i < num ;i ++){
        result += i;
    }    //向主线程返回消息
    postMessage(result);
}

数据传递与共享

WebWorker：提升网页响应速度的神器，让你的网页拥有超能力

在WebWorkers里，数据传输方式可不是共享那么简单，而是会进行数据复制。这样做就是为了保证主进程跟worker进程间能做到数据“互不干扰”。刚开始的时候可能有点迷糊，但了解以后就知道这种方式可以大大提升数据的安全度。

平时操作时，我会用

postMessage()

这个方法向“工人”耗子们发信息，然后再在它们的

onmessage

事件里接收回信。这样就能顺利完成大把的数据运算任务，而且还不会让用户觉得卡顿！

实际应用案例

    线程之间进行数据交互
    线程之间进行数据交互
    
    
    
        var nums = new Array(100),
        intStr = "";        //1.处理非字符串数据
        for(var i = 0; i<100; i++){
            nums[i] = parseInt(Math.random()*100);
            intStr += nums[i] + ";";
        }        //2.创建新进程
        var worker = new Worker("worker2.js");        //3.向子进程发送数据
        worker.postMessage(intStr);        //4.从子线程获取处理结果
        worker.onmessage = function(event){
            var row,
                col,
                tr,
                td,
                table = document.querySelector("#table");            var numArr = event.data.split(";");            for(var i = 0; i<numArr.length; i++){
                row = parseInt(i/10);
                col = i;                if (col == 0 ) {
                    tr = document.createElement("tr");
                    tr.id = "tr" + row;
                    table.appendChild(tr);
                }else{
                    tr = document.querySelector("#tr" + row);
                }
                td = document.createElement('td');
                tr.appendChild(td);
                td.innerHTML = numArr[i];
                td.width = "30";
            }
        }

以前有次做网页的时候，要搞100个随机数出来，然后挑出那些可以被3整除的。我那时傻乎乎地直接在主程序里干这事，结果网页变得卡得不行。用上WebWorkers以后，我就把生成和挑选随机数的活儿扔到后台去了，网页速度立马快多了。

onmessage = function(event){
    var strNum = event.data;    var numArr = strNum.split(";");    var returnNum = "";    for(var i =0; i<numArr.length; i++){        if (numArr[i]%3 ==0) {
            returnNum += numArr[i] + ";";
        }
    }
    postMessage(returnNum);
}

有次做项目，要用网页工人来搞个复杂的图片处理活儿。这种事情需要算很多的数学题，速度可不能慢。好在用WebWorkers把计算搬到后台去做，主程序就可以专心处理用户的各种需求，体验提高得不是一星半点！

WebWorker：提升网页响应速度的神器，让你的网页拥有超能力

共享线程的优势

，你知道吗？WebWorkers有个很棒的概念——共享线程，它能让不同页面，甚至在相同域名下的页面都能共用一个worker处理任务，特别方便！我做的那个项目就是这么干的，用这个方式搞数据同步，省事多了，那些跨页面怎么沟通的难题就这样解决。

var worker = new Worker("script.js");
worker.postMessage("");// 从线程中取得计算结果worker.onmessage = function(event) {
    if(event.data!="")
    {        var j;  //行号
        var k;  //列号
        var tr;        var td;        var intArray=event.data.split(";");        var table=document.getElementById("table");        for(var i=0;i<intArray.length;i++)
        {            
            j=parseInt(i/10,0);
            k=i;            if(k==0)    //该行不存在
            {                //添加行
                tr=document.createElement("tr");
                tr.id="tr"+j;
                table.appendChild(tr);
            }            else  //该行已存在
            {                //获取该行
                tr=document.getElementById("tr"+j);
            }            //添加列
            td=document.createElement("td");
            tr.appendChild(td);            //设置该列内容
            td.innerHTML=intArray[j*10+k];            //设置该列背景色
            td.style.backgroundColor="blue";            //设置该列字体颜色
            td.style.color="white";            //设置列宽
            td.width="30";
        }
    }
};从随机生成的数字中抽取3的倍数并显示示例

用共享线程，咱们用特定名字或者链接就能设好工人。这种自由度让我们能按需选最好的方式。要是做多页协作任务，共享线程就成了超值的宝贝！

onmessage=function(event){
    var intArray=new Array(100);    //随机数组
    //生成100个随机数
    for(var i=0;i<100;i++)
        intArray[i]=parseInt(Math.random()*100);    var worker;    //创建子线程
    worker=new Worker("worker2.js");    //把随机数组提交给子线程进行挑选工作
    worker.postMessage(JSON.stringify(intArray));
    worker.onmessage = function(event) {
        //把挑选结果返回主页面
        postMessage(event.data);
    }
}

消息传递的多种方式

onmessage = function(event) {
    //还原整数数组
    var intArray= JSON.parse(event.data);    var returnStr;
    returnStr="";    for(var i=0;i<intArray.length;i++)
    {        //能否被3整除
        if(parseInt(intArray[i])%3==0)    
        {            if(returnStr!="")
                returnStr+=";";            //将能被3整除的数字拼接成字符串
            returnStr+=intArray[i];    
        }
    }    //返回拼接字符串
    postMessage(returnStr); 
    //关闭子线程          
    close();                         
}

WebWorker能接收各种类型的消息，像普通文本，有序的数据，还有大家都喜欢用的JSON格式数据，很方便！这样，就不用担心遇到什么情况都得换来换去了。比如说，要是在处理繁琐的数据结构，那用JSON传数据就能保证数据的完整和易懂程度。

WebWorker：提升网页响应速度的神器，让你的网页拥有超能力

我搞过用`postMessage()`发复杂对象的活儿，就是让后台线程能不费事就能搞定，还给回数据，大大提升了干活速度！

总结与展望

    线程之间进行数据交互
    线程之间进行数据交互
    
    
    
        var worker1 = new Worker("worker1.js");
        worker1.postMessage("");        //从子线程获取处理结果
        worker1.onmessage = function(event){
            var row,
                col,
                tr,
                td,
                table = document.querySelector("#table");            var numArr = event.data.split(";");            for(var i = 0; i<numArr.length; i++){
                row = parseInt(i/10);
                col = i;                if (col == 0 ) {
                    tr = document.createElement("tr");
                    tr.id = "tr" + row;
                    table.appendChild(tr);
                }else{
                    tr = document.querySelector("#tr" + row);
                }
                td = document.createElement('td');
                tr.appendChild(td);
                td.innerHTML = numArr[i];
                td.width = "30";
            }
        }

用WebWorkers搞网页，速度嗖嗖地快起来，用户体验也跟着直线上升。这东西让我明白了，只要善用后台资源，许多难事都能解决。期待以后能看到更牛逼的WebWorkers应用！

你用过WebWorkers吗？能谈谈它们帮你搞定什么难题么？快来分享你的经历！别忘了给我点个赞！

onmessage = function(event){
    var data = event.data;    var dataArr = new Array(100);    for(var i=0; i<100; i++){
        dataArr[i] = parseInt(Math.random()*100);
    }    //创建新的子进程
    var worker2 = new Worker("worker3.js");    //worker.postMessage传递JSON对象
    worker2.postMessage(JSON.stringify(dataArr));
    worker2.onmessage = function(event){
        //postMessage将数据返回给主页面
        postMessage(event.data);
    }
}

onmessage = function(event){
    var numArr = JSON.parse(event.data);    var returnNum = "";    for(var i =0; i<numArr.length; i++){        if (numArr[i]%3 ==0) {
            returnNum += numArr[i] + ";";
        }
    }
    postMessage(returnNum);
}

原文链接：https://www.icz.com/technicalinformation/web/2024/06/16657.html，转载请注明出处~~~

WebWorker：提升网页响应速度的神器，让你的网页拥有超能力

线程之间进行数据交互

从随机生成的数字中抽取3的倍数并显示示例

线程之间进行数据交互

评论0

在线客服

每日签到

夜间模式

返回顶部

WebWorker：提升网页响应速度的神器，让你的网页拥有超能力

线程之间进行数据交互

从随机生成的数字中抽取3的倍数并显示示例

线程之间进行数据交互

猜你喜欢

评论0

在线客服

每日签到

夜间模式

返回顶部