相当于浏览器可以执行多线程代码，且不阻塞页面
.主线程创建Worker，监听子线程的消息
.子线程计算完成给主线程发消息
demo_workers.js
let i = 0;
setInterval(() => {
i++;
// 向浏览器主线程发消息
postMessage({count: i});
}, 1000);
// 接受主线程的消息
onmessage = (e) => {
i = e.data;
}
index.html
<html>
<head>
<title> Web Workers Demo </title>
</head>
<body>
<div id="count"></div>
<script type="text/javascript">
if (typeof(Worker)!=="undefined") {
// 创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码
let w = new Worker('http://localhost:8080/static/demo_worker.js');
// 监听 web worker 发回的消息
w.onmessage = (event) => {
// 发回的消息 event 可以是一个对象
document.getElementById('count').innerHTML = event.data.count;
if (event.data.count == 10) {
// 向 web worker 发消息
w.postMessage(90);
}
if (event.data.count == 100) {
// 终止 Web Worker（不终止不知道会不会内存泄露，或一直监听浪费资源）
w.terminate();
document.getElementById('count').innerHTML += 'WebWorkers运行已终止';
}
}
// 错误监听
w.onerror = function(error) {
console.error("Worker error: " + error.message + "，file: " + error.filename + ", line: " + error.lineno + "\n");
throw error;
}
} else {
document.getElementById('count').innerHTML = '你的浏览器不支付WebWorkers';
}
</script>
</body>
</html>
生成subworker
如果需要的话 worker 能够生成更多的 worker。这就是所谓的subworker，它们必须托管在同源的父页面内。而且，subworker 解析 URI 时会相对于父 worker 的地址而不是自身页面的地址。这使得 worker 更容易记录它们之间的依赖关系。
- 共享worker
from: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers
网友评论