JavaScript 中的 Worker

js中的 Worker 是一种在浏览器后台运行的线程,它允许你执行脚本操作,而不会阻塞主线程(通常是渲染线程) Worker是一种 Web Worker API的一部分,他提供了在浏览器中进行多线程编程的能力.

基本用法

要创建一个 Worker，你需要创建一个新的 Worker 对象，并传入一个指向包含你想要在后台执行的 JavaScript 代码的文件的 URL。

// 创建一个新的 worker
  const myWorker = new Worker('worker.js');

  // 监听来自 worker 的消息
  myWorker.onmessage = function (e) {
    console.log('获取', e.data)
  }
  // 向 worker 发送消息
  myWorker.postMessage('hello who is your daddy')

在 worker.js 文件中，你可以定义 worker 的行为：

// worker.js

// 监听来自主线程的消息
self.onmessage = function(e) {
  console.log('监听来自主线程的消息:', e.data);

  // 执行一些任务...
  const result = doSomeWork(e.data);

  // 向主线程发送消息
  self.postMessage(result);
};

function doSomeWork(data) {
  // 执行一些计算密集型或耗时的任务
  let result = 0;
  for (let i = 0; i < 1e8; i++) {
    result += i;
  }
  return result;
}

注意事项

• 线程安全: 由于worker在不同的线程中运行,他们不能直接访问主线程
  中的dom或其他对象.他们之间只能通过消息传递 （postMessage 和 onmessage）来通信。

• 文件限制: Worker 通常需要加载一个单独的 JavaScript 文件。尽管一些浏览器可能支持 Blob URL 或 Data URL 来动态创建 worker，但最佳实践是使用外部文件。

• 资源限制:由于 Worker 是在后台运行的，它们不会阻塞页面的渲染，但它们仍然会消耗系统资源（如 CPU 和内存）。因此，应该谨慎使用它们，并避免创建过多的 Worker。

• 错误处理: Worker 中发生的错误不会在主线程中抛出。相反，你需要监听 Worker 的 error 事件来处理这些错误。

类型

除了基本的 Worker 外，Web Worker API 还提供了 SharedWorker 和 Service Worker。

• SharedWorker 允许多个脚本共享同一个 worker。它们可以用于多个窗口或标签页之间的通信。
• Service Worker: 是一种在浏览器后台独立于网页运行的脚本，可以拦截和处理网络请求，缓存资源，以及推送通知等。它们通常用于实现更高级的功能，如离线应用、资源缓存和推送通知。