web-worker 基本使用

Web Workers 是浏览器中的一项技术，它允许在独立的线程中运行 JavaScript 代码，从而避免主线程阻塞。这对于执行长时间运行的计算、处理大量数据或执行其他 CPU 密集型任务非常有用。下面是一个简单的使用 Web Workers 的示例，包括主线程和工作线程的代码。

主线程的代码：

<!-- 创建一个按钮，点击按钮时启动Web Worker -->
<button onclick="startWebWorker()">启动 Web Worker</button><!-- 显示来自Web Worker的消息 -->
<div id="output"></div><script>// 创建 Web Workerlet myWorker = new Worker('./worker.js');// 处理来自 Web Worker 的消息myWorker.onmessage = function (e) {document.getElementById('output').textContent = e.data;};// 启动 Web Worker 的函数function startWebWorker() {// 向 Web Worker 发送消息myWorker.postMessage('我是主线程');}
</script>

worker.js 代码如下：

// worker.js// 监听来自主线程的消息
onmessage = function (e) {// 处理主线程发送的消息const messageFromMain = e.data;// 向主线程发送消息formatJSON(messageFromMain);
};const formatJSON =  function (date){setTimeout((e) =>{// 模拟处理大量数据的过程postMessage('数据处理完成');},2000)
}