解放主线程！Web Worker 让你的前端应用飞起来

大家好，我是你们的老朋友FogLetter，今天我们来聊聊一个让前端性能起飞的黑科技------Web Worker！

为什么需要Web Worker？

先讲个真实案例：有一位前端程序员写的的图片压缩工具在压缩大图时页面直接卡死，用户疯狂投诉。其他大佬一看代码，好家伙，所有计算都在主线程上跑，能不卡吗？

这就是典型的"JS脆皮综合症"------JavaScript是单线程的，就像一家只有一个服务员的餐厅，既要招呼客人又要炒菜洗碗，忙不过来啊！

Web Worker 是什么？

Web Worker是HTML5带来的多线程解决方案，它允许我们在浏览器中创建后台线程，把繁重的计算任务丢给Worker去处理，主线程继续优雅地响应用户操作。

简单来说，就是给那家餐厅雇了个专门洗碗的伙计！

Web Worker 能做什么？

图片/视频处理：压缩、滤镜、格式转换
大数据处理：表格导出、复杂计算
AI模型推理：浏览器端跑轻量级模型
实时数据处理：股票行情、游戏物理引擎

最近很火的"端模型"趋势（在电脑、手机等设备本地运行AI模型）就大量使用Worker来避免界面卡顿。

核心API三件套

javascript 复制代码

// 主线程
const worker = new Worker('./worker.js') // 1. 创建Worker

worker.postMessage(data) // 2. 发送消息

worker.onmessage = (e) => { // 3. 接收消息
  console.log('Worker说：', e.data)
}

javascript 复制代码

// worker.js
self.onmessage = (e) => { // 接收消息
  const result = doHeavyWork(e.data) // 处理数据
  self.postMessage(result) // 发送结果
}

实战：图片压缩工具

让我们用Worker实现一个不卡顿的图片压缩工具：

主线程代码 (main.js)

javascript 复制代码

const worker = new Worker('./compressWorker.js')

// 收到压缩结果
worker.onmessage = function (e) {
  if(e.data.success) { 
    document.getElementById('output').innerHTML = `
    <img src="${e.data.data}" />
    `
  }
}

// 处理文件选择
document.getElementById('fileInput').addEventListener('change', async function (e) {
  const file = e.target.files[0]
  if (!file) return
  
  // 读取文件为DataURL
  const imgDataUrl = await new Promise((resolve) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.readAsDataURL(file)
  })
  
  // 交给Worker处理
  worker.postMessage({
    imgData: imgDataUrl,
    quality: 0.5 // 压缩质量
  })
})

Worker线程代码 (compressWorker.js)

javascript 复制代码

self.onmessage = async function (e) {
  const { imgData, quality = 0.8 } = e.data
  
  try {
    // 1. 将Base64转为位图
    const bitmap = await createImageBitmap(
      await (await fetch(imgData)).blob()
    )
    
    // 2. 创建离屏Canvas
    const canvas = new OffscreenCanvas(bitmap.width, bitmap.height)
    const ctx = canvas.getContext('2d')
    
    // 3. 绘制图像
    ctx.drawImage(bitmap, 0, 0)
    
    // 4. 压缩为JPEG
    const compressedBlob = await canvas.convertToBlob({
      type: 'image/jpeg',
      quality
    })
    
    // 5. 转回DataURL
    const reader = new FileReader()
    reader.onload = () => {
      self.postMessage({
        success: true,
        data: reader.result
      })
    }
    reader.readAsDataURL(compressedBlob)
    
  } catch (err) {
    self.postMessage({
      success: false,
      error: err.message
    })
  }
}

使用限制与注意事项

DOM禁区 ：Worker不能直接访问DOM，document、window都不存在
通信成本：大数据传递会有序列化开销，考虑Transferable Objects
生命周期 ：Worker用完记得worker.terminate()
错误处理 ：一定要监听onerror事件

未来展望

随着端侧AI的兴起，Web Worker会越来越重要。比如：

浏览器大模型：把LLM推理放在Worker中
实时视频处理：美颜、背景虚化
Web3计算：区块链相关计算

总结

记住Web Worker的三大法则：

主线程是用来响应用户的，别让它干重活
Worker是你的计算伙伴，大胆把任务分出去
通信是必要的开销，设计好消息协议

现在就去给你的项目找个"洗碗工"吧！下次遇到复杂计算时，优雅地说一句："这个让我的Worker来处理~"

如果觉得有帮助，别忘了点赞收藏！