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、參考鏈接：很多很多（諸位原作者抱歉）。。。