web worker sharedWorker - 铭の


// 主进程代码

let w1 = new Worker('./js/my.js')

w1.addEventListener('message',function(evt){
	console.log('evt',evt.data)
})

w1.postMessage('main path message')

// 子进程代码(my.js文件)

// 给主进程发送消息
this.postMessage('the result is 100')

// 接受主进程消息（方法一）
// this.onmessage = ret => {
//     console.log(ret.data)
// }
// 接受主进程消息（方法二）
this.addEventListener('message',function(evt){
        console.log(evt.data)
        // 关闭自己进程
        this.close()
})

Web Worker 有以下几个使用注意点：

（1）同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）DOM 限制

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

（3）通信联系

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（4）脚本限制

Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（5）文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

Web Worker 通常应用于哪些方面呢？

处理密集型数学计算

大数据集排序

数据处理（压缩、音频分析、图像处理等）

高流量网络通信

实例：

Worker 线程完成轮询

有时，浏览器需要轮询服务器状态，以便第一时间得知状态改变。这个工作可以放在 Worker 里面。

sharedWorker：共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。

// 共享线程的JS文件 (my.js文件)

var a = 1;
onconnect = function (e) {
    var port = e.ports[0];
    port.onmessage = function () {
        port.postMessage(a++)
    }
}

// html文件（index.html）

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>worker demo</title></head>
<body>
    <div> <h1>使用shared worker:</h1> </div>
    <button style="padding: 10px; margin: 10px 0;">点击一下</button>
    <div><span>点了 <span class="time">-</span> 下</span></div>
    <iframe src="index2.html" width='500px' height="400px"></iframe>
    <script>
        let button = document.querySelector('button');
        let worker = new SharedWorker('worker.js');
        worker.port.start();
        let time;
        button.addEventListener('click', function () {
            worker.port.postMessage('start');
        });
        let timeDom = document.querySelector('.time');
        worker.port.onmessage = function (val) {
            timeDom.innerHTML = val.data
        }
    </script>
</body>
</html>

// html文件（index2.html）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>worker demo</title></head>
<body>
    <div><h1>使用shared  worker:</h1></div>
    <button style="padding: 10px; margin: 10px 0;">点击一下</button>
    <div><span>点了 <span class="time">-</span> 下</span></div>
    <script>
        let button = document.querySelector('button');
        let worker = new SharedWorker('worker.js');
        worker.port.start();
        let time;
        button.addEventListener('click', function () {
            worker.port.postMessage('start');
        });
        let timeDom = document.querySelector('.time');
        worker.port.onmessage = function (val) {
            timeDom.innerHTML = val.data
        }
    </script>
</body>
</html>

posted on 2020-06-22 15:38 铭の阅读(311) 评论(0) 编辑收藏举报

刷新页面返回顶部