در جاوااسکریپت به صورت پیش‌فرض همه کدها روی main thread (رشته اصلی) اجرا می‌شوند.
اگر کاری سنگین (مثل پردازش داده یا محاسبات زیاد) انجام شود، مرورگر ممکن است کند شود یا حتی برای مدتی پاسخگو نباشد.

📌 برای حل این مشکل، از Web Workers استفاده می‌کنیم.
Web Worker یک اسکریپت جداگانه است که در پس‌زمینه اجرا می‌شود و بدون اینکه UI صفحه را مختل کند، وظایف سنگین را انجام می‌دهد.

🔹 1. ایجاد یک Worker

ابتدا باید یک فایل جاوااسکریپت جدا بسازیم.

worker.js

// کدی که در پس‌زمینه اجرا می‌شود
self.onmessage = function(event) {
  let num = event.data;
  let result = num * 2;
  self.postMessage(result);
};

main.js

// ساخت Worker
let worker = new Worker("worker.js");

// ارسال داده به Worker
worker.postMessage(10);

// دریافت پاسخ از Worker
worker.onmessage = function(event) {
  console.log("Result:", event.data); // 20
};

🔹 2. متوقف کردن Worker

worker.terminate();

📌 بعد از متوقف شدن، Worker دیگر قابل استفاده نیست.

🔹 3. ویژگی‌های Web Workers

• در رشته جداگانه (background thread) اجرا می‌شوند.

• به DOM دسترسی مستقیم ندارند.

• می‌توانند با postMessage داده بفرستند و بگیرند.

• برای کارهای سنگین مثل محاسبات ریاضی، پردازش تصویر، مدیریت داده‌های بزرگ مناسب هستند.

🔹 4. انواع Workers

• Dedicated Workers → مخصوص یک صفحه خاص (پراستفاده‌ترین)

• Shared Workers → قابل استفاده بین چند صفحه یا تب مختلف

• Service Workers → برای مدیریت کش، آفلاین شدن اپلیکیشن و نوتیفیکیشن‌ها

🔹 5. مثال کاربردی

محاسبه اعداد بزرگ بدون کند شدن UI:

worker.js

self.onmessage = function(event) {
  let n = event.data;
  let sum = 0;
  for (let i = 0; i < n; i++) {
    sum += i;
  }
  self.postMessage(sum);
};

main.js

let worker = new Worker("worker.js");

worker.postMessage(1000000000);

worker.onmessage = function(event) {
  console.log("Sum:", event.data);
};

✅ خلاصه

• Web Workers → اجرای کد در پس‌زمینه بدون کند شدن صفحه

• متدها:

  • new Worker("file.js") → ساخت Worker

  • ()postMessage → ارسال پیام

  • onmessage → دریافت پیام

  • ()terminate → توقف Worker

• انواع: Dedicated, Shared, Service Workers