参考文档：http://www.ruanyifeng.com/blog/2018/07/web-worker.html
背景：充分利用 CPU 能力，多线程运行脚本
实践（下方代码）：简单的主线程与 worker 之间的通信、终止 wroker
其他适用场景：需浏览器轮询服务器
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title
<div id="hi">
<div id="hello">
hehe da
function createWorker(f) {
let blob =new Blob(['(' + f.toString() +')()']);
let url = window.URL.createObjectURL(blob);
let worker =new Worker(url);
return worker;
}
// worker
let pollingWorker =createWorker(function (e) {
// 往主线程发消息
setInterval(function () {
self.postMessage('hello');
}, 1000);
// 接收主线程消息
self.addEventListener('message', (e) => {
self.postMessage('nonono');
})
// 内部关闭woker
setInterval(() => {
self.close();
}, 10000)
});
// 主线程接收消息
pollingWorker.onmessage =function (e) {
console.log('data:', e.data);
let $ele = document.getElementById('hi');
let text = $ele.innerHTML;
$ele.innerHTML = (text + e.data);
// render data
}
// 主线程发送消息
pollingWorker.postMessage('init');
// 主线程终止woker
setInterval(() => {
pollingWorker.terminate();
}, 20000)
</html>
网友评论