worker和sharedworker

barnett_y

已于 2022-04-03 11:03:54 修改

阅读量1.2k

点赞数

分类专栏：【前端收集知识点】文章标签：前端

于 2022-03-24 08:58:52 首次发布

本文链接：https://blog.csdn.net/sinat_17775997/article/details/123701969

版权

【前端收集知识点】专栏收录该内容

75 篇文章 10 订阅

订阅专栏

1、介绍

h5的新功能，主要作用，开辟新线程，充分利用计算机算力，防止“假死”（单线程，js引擎和UI线程互斥）

worker：专属线程，只针对当前运行环境

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

2、worker使用

1、查看文档

阮一峰worker网络日子

2、线程js文件

self.addEventListener('message', function (event) {
    setTimeout(() => {
        self.postMessage("1111-------1111")
    }, 2000);
});

3、html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>Shared Workers basic example</title>
  </head>
  <body>
    <div class="controls" tabindex="0">
    <button οnclick="aa()">按钮</button>
    </div>
    <script>
        function aa(){
            var worker = new Worker('work.js', { name : 'myWorker' })
            worker.postMessage({name:'12321'})
            worker.addEventListener('message', function (event) {
                console.log(event.data,event);
            });
        }
    </script>
  </body>
</html>

4、注意事项

本地开发有同源策略问题，谷歌浏览器可以通过：chrome://inspect/#workers查看相关信息

3、sharedWorker

1、前言

sharedworker使用和worker差别不大，sharedworker是共享线程，那么，如何实现共享呢？

是根据实例化时候，传入参数，第一个参数：url；第二个参数：sharedworker相关的配置。

第一个参数和第二个参数的name一致（name可能有调整），则调用同一个线程，里面暂存的数据也能实现共享

sharedworker严格遵循同源策略，即代码需要在同域，如果不同域（本地开发），则实现效果和worker无差别，如何实现本地调试？

前端服务即可：安装http-server，对应的文件夹下面跑起来，直接调用，关闭/开启前端服务chrome://inspect/#workers 即可看到分别开启了两个线程、一个线程

2、线程js文件

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

3、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>

4、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>

barnett_y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
worker和sharedworker

1、介绍h5的新功能，主要作用，开辟新线程，充分利用计算机算力，防止“假死”（单线程，js引擎和UI线程互斥）worker：专属线程，只针对当前运行环境sharedWorker：共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。2、worker使用1、查看文档阮一峰worker网络日子2、线程js文件self.addEventListener('message', function (event) { setTimeout(() =&.
复制链接

扫一扫