javascript Worker怎么用_如何实现多线程编程来避免界面阻塞？

Worker 是浏览器提供的多线程机制，用于在后台线程执行耗时任务以避免阻塞主线程；需独立 JS 文件，通过 postMessage/onmessage 通信，数据经序列化复制传递。

JavaScript 的 Worker 是浏览器提供的多线程机制，它让耗时任务（如大量计算、数据处理、加密解密）在后台线程中运行，不占用主线程，从而避免阻塞页面渲染和用户交互。

Worker 的基本用法

Worker 需要将逻辑写在独立的 JS 文件中，通过 new Worker() 实例化并通信。主线程和 Worker 之间不能共享变量或 DOM，只能靠 postMessage() 和 onmessage 传递数据（序列化后复制，不是引用）。

• 创建一个文件 worker.js，内容为：

  self.onmessage = function(e) {
    const data = e.data;
    // 模拟耗时计算
    let result = 0;
    for (let i = 0; i < data * 1000000; i++) {
      result += i;
    }
    self.postMessage({ result });
  };

  登录后复制

• 在主页面中使用：

  const worker = new Worker('worker.js');
  <p>worker.onmessage = function(e) {
  console.log('计算结果：', e.data.result);
  };</p><p>worker.postMessage(100); // 向 worker 发送数据

  登录后复制

• 注意：Worker 无法访问 window、document、alert 等主线程 API，也不能直接操作 DOM；若需更新界面，必须由主线程接收消息后再操作。

如何传复杂数据（如大数组、对象）？

Worker 支持结构化克隆（structured clone），可传普通对象、数组、Map、Set、Date、RegExp 等（但不能传函数、DOM 节点、undefined）。对超大数组，建议启用 Transferable Objects 提升性能——把 ArrayBuffer 或 TypedArray 的所有权转移过去，避免拷贝：

标签： javascript java html js 浏览器 win red