worker和sharedworker
1、介绍
h5的新功能，主要作用，开辟新线程，充分利用计算机算力，防止“假死”（单线程，js引擎和UI线程互斥）
worker：专属线程，只针对当前运行环境
sharedWorker：共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。
2、worker使用
1、查看文档
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 onclick="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>
5、参考链接：很多很多（诸位原作者抱歉）。。。
