Web Workers 是一种 JavaScript 机制,允许在后台运行独立的线程,以执行一些计算密集型或耗时的任务。这使得在多核 CPU 上并行处理任务成为可能。
直接show code:
hello.html代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>hello world!!!!
</p>
<div id="hello"></div></body>
<script>// 获取id为"hello"的div元素let helloDiv = document.getElementById("hello");let num = 42const worker = new Worker('worker.js');// 发送消息给 worker(将耗时的工作交给work线程去处理,这样就不会影响页面的渲染)worker.postMessage(num);//worker进程计算好后发送过来结果worker.onmessage = (e) => {// 接收来自 worker 的消息console.log("接收来自 worker 的消息:",e.data);//将结果渲染到页面helloDiv.append(e.data)}</script>
</html>
worker.js代码
// 接收来自主线程的消息
onmessage = (e) => {console.log("接收来自主线程的消息:",e.data);//处理耗时的计算任务let res = fibonacci(e.data)res = res + "-" + (new Date()).getSeconds()// 将计算结果发送给主线程postMessage(res);
};function fibonacci(n) {if (n <= 1) {return n;} else {return fibonacci(n - 1) + fibonacci(n - 2);}
}