1.WebWorker是什么？
Web Worker是一种使JavaScript能够在后台线程中执行的浏览器API。
它可以在独立的线程中运行JavaScript代码，而不会阻塞页面的主线程。
2.WebWoker是用来干嘛的？
Web Worker可用于处理耗时的操作，如复杂的计算、大型数据集的处理和网络请求等。
3.WebWorker有什么限制？
每个浏览器的Worker线程数量也是有限制的，超出限制可能导致部分Worker线程被阻塞
直接实战demo.html
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1">
<input type="number" value="0"/>
<button onclick="clickHandler('box1')">计算</button>
<span></span>
</div>
<div id="box2">
<input type="number" value="0" />
<button onclick="clickHandler('box2')">计算</button>
<span></span>
</div>
<div id="box3">
<input type="number" value="0"/>
<button onclick="clickHandler('box3')">计算</button>
<span></span>
</div>
<script>
const workerMap={}
function clickHandler(boxId) {
let worker = workerMap[boxId]
if(!worker){
worker = new Worker('fib_worker.js')
workerMap[boxId]=worker
worker.onmessage=(event)=>{
const boxEl = document.getElementById(boxId);
const inputEl = boxEl.getElementsByTagName('input')[0];
const number = inputEl.value;
const spanEl = boxEl.getElementsByTagName('span')[0];
spanEl.innerHTML = `${number} fib result is ${event.data}`;
}
}
const boxEl = document.getElementById(boxId);
const inputEl = boxEl.getElementsByTagName('input')[0];
const number = inputEl.value;
worker.postMessage(number)
}
</script>
</body>
</html>
function fib(n) {
if (n < 2) {
return n;
}
return fib(n - 1) + fib(n - 2);
}
self.onmessage=(event)=>{
console.info('go workder',event.data)
const number = event.data
const result = fib(number)
self.postMessage(result)
}
