【高频考点精讲】手写Web Worker通信：从主线程到子线程，掌握多线程编程技巧

手写Web Worker通信：从主线程到子线程，掌握多线程编程技巧

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

今天咱们聊聊Web Worker这个前端性能优化的"核武器"。我是全栈老李，一个喜欢把复杂技术讲简单的技术博主。

为什么需要Web Worker？

想象你在餐厅点单，如果只有一个服务员（主线程），他既要接待顾客，又要去后厨炒菜，还要收拾桌子，那效率得多低啊！Web Worker就像是餐厅里专门负责后厨的厨师，让主线程专心处理UI交互，把繁重的计算任务交给Worker去处理。

Web Worker的本质就是浏览器提供的多线程能力。它允许JavaScript在后台线程中运行脚本，不会阻塞主线程的UI渲染和用户交互。全栈老李提醒：虽然叫"多线程"，但Worker线程不能直接操作DOM，这是它的设计限制。

手把手教你实现Worker通信

1. 创建Worker

首先，我们需要创建一个Worker文件，比如叫worker.js：

// worker.js
// 全栈老李提醒：Worker线程中不能访问DOM、window等主线程对象

// 监听主线程发来的消息
self.addEventListener('message', (e) => {
   
  console.log('Worker收到消息:', e.data);
  
  // 模拟耗时计算
  const result = heavyCalculation(e.data);
  
  // 向主线程发送计算结果
  self.postMessage({
   
    input: e.data,
    result: result,
    time: new Date().toLocaleTimeString()
  });
});

// 一个模拟的耗时计算函数
function heavyCalculation(