Web Worker浅学

 Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。它独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。      

1、Web Worker的创建是在主线程当中通过传入文件的url来实现的。如下所示：
 

var webworker=new Worker('my_task.js');

创建webworker对象的时候需要判断浏览器是否支持 if(typeof Worker == 'undefind')则提示错误；

返回的webworker对象，该对象可以完成与worker线程的通信，主要通过webworker.postMessage(data)向线程发送消息，通过webworker.onmessage=function(evt){}来监听worker线程发送到主线程的消息，通过webworker.onerror=function(evt){}来监听线程中的错误消息，通过webworker.terminate()来告诉worker线程立即终止执行。


2、web worker线程是无法操作Dom对象的，所以像prompt、alert、console等都是无法在web worker线程中使用的，所以调试不太处理。但是可以将调试发送给主线程，主线程通过web worker线程发出的请求作出处理。


 3、用于创建webworker线程的js文件必须和当前页面遵循同源策略，也就是说不能跨域请求js文件；另外，线程之间的消息传递是不能有Function对象的，就是说不能够传递函数，在safari浏览器中只能传递数字/字符串等基本值（连Object都不行）。并且所有线程之间的数据并不是常规的引用方式，都是一份独立的拷贝。因此一般情况下，我们会将传递的参数转化为字符串进行传递，可以通过JSON.stringify()和JSON.parse()来处理。

 

****一个发送消息的小例子****

woker.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Worker模拟聊天</title>
    <style>
        .apply{width:500px;height:300px;overflow:auto;border: 1px solid #000;margin:20px;padding:20px;font-size:14px;line-height:24px;}
        .apply .time{color:#ccc;font-size:12px;}
    </style>
</head>
<body>
    <div class="apply" id="res2"></div>
    <div style="padding:20px;">
        <textarea style="width:400px;height:100px;" id="res"></textarea>
        <button onclick="startWorker()">发送</button>
        <button onclick="stopWorker()">stop</button>
    </div>
    <script>
    var w;
    w = new Worker('worker.js');
    var res = document.getElementById('res'),
        res2 = document.getElementById('res2');
    if(typeof Worker !== 'undefined'){
        function startWorker(){
            w.postMessage(res.value);
            res.innerHTML = '';
            w.onmessage = function(e){ 
                var oTxt = document.createTextNode(e.data);
                var oTime = document.createElement('div'),
                    oTimeTxt = document.createTextNode(new Date());
                oTime.setAttribute('class','time')
                oTime.appendChild(oTimeTxt);
                res2.appendChild(oTime);
                res2.appendChild(oTxt);
                res2.appendChild(document.createElement('br'))
                res2.appendChild(document.createElement('br'))
            }
        }
        function stopWorker(){
            w.terminate();
        }
    }

    </script>
</body>
</html>

worker.js

onmessage = function(e){
	postMessage("收到："+e.data);
}

 效果：

 

有借鉴：https://blog.csdn.net/web_doris/article/details/38440401

 

posted @ 2018-03-23 19:15  幽竹小妖  阅读(375)  评论(0)    收藏  举报