ترِدهای کارگر ماژول جاوااسکریپت: تسلط بر پردازش ماژول در پس‌زمینه

جاوااسکریپت، که به طور سنتی تک‌نخی (single-threaded) است، گاهی اوقات ممکن است با وظایف محاسباتی سنگین که نخ اصلی را مسدود می‌کنند، دچار مشکل شود که منجر به فریز شدن رابط کاربری (UI) و تجربه کاربری ضعیف می‌شود. با این حال، با ظهور ترِدهای کارگر (Worker Threads) و ماژول‌های ECMAScript، توسعه‌دهندگان اکنون ابزارهای قدرتمندی در اختیار دارند تا وظایف را به ترِدهای پس‌زمینه منتقل کرده و اپلیکیشن‌های خود را واکنش‌گرا نگه دارند. این مقاله به دنیای ترِدهای کارگر ماژول جاوااسکریپت می‌پردازد و مزایا، پیاده‌سازی و بهترین شیوه‌های ساخت اپلیکیشن‌های وب با عملکرد بالا را بررسی می‌کند.

درک نیاز به ترِدهای کارگر

دلیل اصلی استفاده از ترِدهای کارگر، اجرای کد جاوااسکریپت به صورت موازی و خارج از نخ اصلی است. نخ اصلی مسئول رسیدگی به تعاملات کاربر، به‌روزرسانی DOM و اجرای بخش عمده منطق اپلیکیشن است. هنگامی که یک وظیفه طولانی‌مدت یا سنگین از نظر پردازشی (CPU-intensive) روی نخ اصلی اجرا می‌شود، می‌تواند UI را مسدود کرده و اپلیکیشن را غیرپاسخگو کند.

سناریوهای زیر را در نظر بگیرید که در آن‌ها ترِدهای کارگر می‌توانند به ویژه مفید باشند:

• پردازش تصویر و ویدئو: دستکاری‌های پیچیده تصویر (تغییر اندازه، فیلترگذاری) یا رمزگذاری/رمزگشایی ویدئو را می‌توان به یک ترِد کارگر منتقل کرد تا از فریز شدن UI در طول فرآیند جلوگیری شود. یک اپلیکیشن وب را تصور کنید که به کاربران اجازه آپلود و ویرایش تصاویر را می‌دهد. بدون ترِدهای کارگر، این عملیات می‌توانند اپلیکیشن را غیرپاسخگو کنند، به خصوص برای تصاویر بزرگ.
• تحلیل داده و محاسبات: انجام محاسبات پیچیده، مرتب‌سازی داده‌ها یا تحلیل‌های آماری می‌تواند از نظر محاسباتی پرهزینه باشد. ترِدهای کارگر اجازه می‌دهند این وظایف در پس‌زمینه اجرا شوند و UI واکنش‌گرا باقی بماند. به عنوان مثال، یک اپلیکیشن مالی که روندهای لحظه‌ای سهام را محاسبه می‌کند یا یک اپلیکیشن علمی که شبیه‌سازی‌های پیچیده انجام می‌دهد.
• دستکاری سنگین DOM: در حالی که دستکاری DOM عموماً توسط نخ اصلی انجام می‌شود، به‌روزرسانی‌های بسیار بزرگ DOM یا محاسبات رندرینگ پیچیده گاهی اوقات می‌توانند به نخ دیگری منتقل شوند (اگرچه این کار برای جلوگیری از ناهماهنگی داده‌ها به معماری دقیقی نیاز دارد).
• درخواست‌های شبکه: اگرچه fetch/XMLHttpRequest ناهمگام هستند، اما انتقال پردازش پاسخ‌های حجیم می‌تواند عملکرد ادراک‌شده را بهبود بخشد. تصور کنید یک فایل JSON بسیار بزرگ را دانلود کرده و نیاز به پردازش آن دارید. دانلود ناهمگام است، اما تجزیه و پردازش آن همچنان می‌تواند نخ اصلی را مسدود کند.
• رمزگذاری/رمزگشایی: عملیات رمزنگاری از نظر محاسباتی سنگین هستند. با استفاده از ترِدهای کارگر، UI هنگام رمزگذاری یا رمزگشایی داده‌ها توسط کاربر فریز نمی‌شود.

معرفی ترِدهای کارگر جاوااسکریپت

ترِدهای کارگر (Worker Threads) قابلیتی هستند که در Node.js معرفی شده و برای مرورگرهای وب از طریق Web Workers API استاندارد شده‌اند. آن‌ها به شما اجازه می‌دهند تا ترِدهای اجرایی جداگانه‌ای در محیط جاوااسکریپت خود ایجاد کنید. هر ترِد کارگر فضای حافظه خاص خود را دارد که از شرایط رقابتی (race conditions) جلوگیری کرده و جداسازی داده‌ها را تضمین می‌کند. ارتباط بین نخ اصلی و ترِدهای کارگر از طریق ارسال پیام (message passing) انجام می‌شود.

مفاهیم کلیدی:

• جداسازی ترِد: هر ترِد کارگر زمینه اجرایی و فضای حافظه مستقل خود را دارد. این امر مانع از دسترسی مستقیم ترِدها به داده‌های یکدیگر می‌شود و خطر خرابی داده‌ها و شرایط رقابتی را کاهش می‌دهد.
• ارسال پیام: ارتباط بین نخ اصلی و ترِدهای کارگر از طریق متد `postMessage()` و رویداد `message` صورت می‌گیرد. داده‌ها هنگام ارسال بین ترِدها سریالایز می‌شوند تا از یکپارچگی آن‌ها اطمینان حاصل شود.
• ماژول‌های ECMAScript (ESM): جاوااسکریپت مدرن از ماژول‌های ECMAScript برای سازماندهی و ماژولار کردن کد استفاده می‌کند. ترِدهای کارگر اکنون می‌توانند مستقیماً ماژول‌های ESM را اجرا کنند، که مدیریت کد و وابستگی‌ها را ساده‌تر می‌کند.

کار با ترِدهای کارگر ماژول

قبل از معرفی ترِدهای کارگر ماژول، کارگرها فقط با یک URL که به یک فایل جاوااسکریپت جداگانه ارجاع می‌داد، قابل ایجاد بودند. این موضوع اغلب منجر به مشکلاتی در حل و فصل ماژول‌ها و مدیریت وابستگی‌ها می‌شد. با این حال، ترِدهای کارگر ماژول به شما اجازه می‌دهند تا کارگرها را مستقیماً از ماژول‌های ES ایجاد کنید.

ایجاد یک ترِد کارگر ماژول

برای ایجاد یک ترِد کارگر ماژول، کافی است URL یک ماژول ES را به سازنده `Worker` به همراه آپشن `{ type: 'module' }` ارسال کنید:

const worker = new Worker('./my-module.js', { type: 'module' });

در این مثال، `my-module.js` یک ماژول ES است که حاوی کدی است که باید در ترِد کارگر اجرا شود.

مثال: کارگر ماژول پایه

بیایید یک مثال ساده ایجاد کنیم. ابتدا، یک فایل به نام `worker.js` بسازید:

// worker.js

addEventListener('message', (event) => {
  const data = event.data;
  console.log('Worker received:', data);

  const result = data * 2;
  postMessage(result);
});

حالا، فایل جاوااسکریپت اصلی خود را ایجاد کنید:

// main.js

const worker = new Worker('./worker.js', { type: 'module' });

worker.addEventListener('message', (event) => {
  const result = event.data;
  console.log('Main thread received:', result);
});

worker.postMessage(10);

در این مثال:

• `main.js` یک ترِد کارگر جدید با استفاده از ماژول `worker.js` ایجاد می‌کند.
• نخ اصلی یک پیام (عدد 10) را با استفاده از `worker.postMessage()` به ترِد کارگر ارسال می‌کند.
• ترِد کارگر پیام را دریافت کرده، آن را در 2 ضرب می‌کند و نتیجه را به نخ اصلی بازمی‌گرداند.
• نخ اصلی نتیجه را دریافت کرده و آن را در کنسول ثبت می‌کند.

ارسال و دریافت داده‌ها

داده‌ها بین نخ اصلی و ترِدهای کارگر با استفاده از متد `postMessage()` و رویداد `message` مبادله می‌شوند. متد `postMessage()` داده‌ها را قبل از ارسال سریالایز می‌کند و رویداد `message` از طریق خاصیت `event.data` به داده‌های دریافتی دسترسی می‌دهد.

شما می‌توانید انواع مختلفی از داده‌ها را ارسال کنید، از جمله:

• مقادیر اولیه (اعداد، رشته‌ها، بولین‌ها)
• اشیاء (شامل آرایه‌ها)
• اشیاء قابل انتقال (ArrayBuffer, MessagePort, ImageBitmap)

اشیاء قابل انتقال یک مورد خاص هستند. به جای کپی شدن، آن‌ها از یک ترِد به ترِد دیگر منتقل می‌شوند که منجر به بهبود عملکرد قابل توجهی می‌شود، به خصوص برای ساختارهای داده بزرگ مانند ArrayBuffer ها.

مثال: اشیاء قابل انتقال

بیایید با استفاده از یک ArrayBuffer این موضوع را نشان دهیم. فایل `worker_transfer.js` را ایجاد کنید:

// worker_transfer.js

addEventListener('message', (event) => {
  const buffer = event.data;
  const array = new Uint8Array(buffer);

  // تغییر بافر
  for (let i = 0; i < array.length; i++) {
    array[i] = array[i] * 2;
  }

  postMessage(buffer, [buffer]); // انتقال مالکیت به نخ اصلی
});

و فایل اصلی `main_transfer.js`:

// main_transfer.js

const buffer = new ArrayBuffer(1024);
const array = new Uint8Array(buffer);

// مقداردهی اولیه آرایه
for (let i = 0; i < array.length; i++) {
  array[i] = i;
}

const worker = new Worker('./worker_transfer.js', { type: 'module' });

worker.addEventListener('message', (event) => {
  const receivedBuffer = event.data;
  const receivedArray = new Uint8Array(receivedBuffer);

  console.log('Main thread received:', receivedArray);
});

worker.postMessage(buffer, [buffer]); // انتقال مالکیت به کارگر

در این مثال:

• نخ اصلی یک ArrayBuffer ایجاد کرده و آن را با مقادیری مقداردهی اولیه می‌کند.
• نخ اصلی مالکیت ArrayBuffer را با استفاده از `worker.postMessage(buffer, [buffer])` به ترِد کارگر منتقل می‌کند. آرگومان دوم، `[buffer]`، آرایه‌ای از اشیاء قابل انتقال است.
• ترِد کارگر ArrayBuffer را دریافت کرده، آن را تغییر می‌دهد و مالکیت را به نخ اصلی بازمی‌گرداند.
• پس از `postMessage`، نخ اصلی *دیگر* به آن ArrayBuffer دسترسی ندارد. تلاش برای خواندن یا نوشتن روی آن منجر به خطا خواهد شد. این به این دلیل است که مالکیت منتقل شده است.
• نخ اصلی ArrayBuffer تغییر یافته را دریافت می‌کند.

اشیاء قابل انتقال برای عملکرد هنگام کار با حجم زیادی از داده‌ها حیاتی هستند، زیرا از سربار کپی کردن جلوگیری می‌کنند.

مدیریت خطا

خطاهایی که در یک ترِد کارگر رخ می‌دهند را می‌توان با گوش دادن به رویداد `error` روی شیء کارگر، دریافت کرد.

worker.addEventListener('error', (event) => {
  console.error('Worker error:', event.message, event.filename, event.lineno);
});

این به شما امکان می‌دهد تا خطاها را به درستی مدیریت کرده و از کرش کردن کل اپلیکیشن جلوگیری کنید.

کاربردهای عملی و مثال‌ها

بیایید برخی از مثال‌های عملی در مورد چگونگی استفاده از ترِدهای کارگر ماژول برای بهبود عملکرد اپلیکیشن را بررسی کنیم.

۱. پردازش تصویر

یک اپلیکیشن وب را تصور کنید که به کاربران اجازه آپلود تصاویر و اعمال فیلترهای مختلف (مانند سیاه‌وسفید، تاری، سپیا) را می‌دهد. اعمال مستقیم این فیلترها روی نخ اصلی می‌تواند باعث فریز شدن UI شود، به خصوص برای تصاویر بزرگ. با استفاده از یک ترِد کارگر، پردازش تصویر می‌تواند به پس‌زمینه منتقل شود و UI واکنش‌گرا باقی بماند.

ترِد کارگر (image-worker.js):

// image-worker.js

import { applyGrayscaleFilter } from './image-filters.js';

addEventListener('message', async (event) => {
  const { imageData, filter } = event.data;
  let processedImageData;

  switch (filter) {
    case 'grayscale':
      processedImageData = applyGrayscaleFilter(imageData);
      break;
    // فیلترهای دیگر را اینجا اضافه کنید
    default:
      processedImageData = imageData;
  }

  postMessage(processedImageData, [processedImageData.data.buffer]); // شیء قابل انتقال
});

نخ اصلی:

// main.js

const worker = new Worker('./image-worker.js', { type: 'module' });

worker.addEventListener('message', (event) => {
  const processedImageData = event.data;
  // به‌روزرسانی بوم (canvas) با داده‌های تصویر پردازش‌شده
  updateCanvas(processedImageData);
});

// دریافت داده‌های تصویر از بوم
const imageData = getImageData();

worker.postMessage({ imageData: imageData, filter: 'grayscale' }, [imageData.data.buffer]); // شیء قابل انتقال

۲. تحلیل داده

یک اپلیکیشن مالی را در نظر بگیرید که نیاز به انجام تحلیل‌های آماری پیچیده روی مجموعه داده‌های بزرگ دارد. این کار می‌تواند از نظر محاسباتی سنگین باشد و نخ اصلی را مسدود کند. می‌توان از یک ترِد کارگر برای انجام تحلیل در پس‌زمینه استفاده کرد.

ترِد کارگر (data-worker.js):

// data-worker.js

import { performStatisticalAnalysis } from './data-analysis.js';

addEventListener('message', (event) => {
  const data = event.data;
  const results = performStatisticalAnalysis(data);
  postMessage(results);
});

نخ اصلی:

// main.js

const worker = new Worker('./data-worker.js', { type: 'module' });

worker.addEventListener('message', (event) => {
  const results = event.data;
  // نمایش نتایج در UI
  displayResults(results);
});

// بارگذاری داده‌ها
const data = loadData();

worker.postMessage(data);

۳. رندرینگ سه‌بعدی

رندرینگ سه‌بعدی مبتنی بر وب، به ویژه با کتابخانه‌هایی مانند Three.js، می‌تواند بسیار سنگین از نظر پردازشی باشد. انتقال برخی از جنبه‌های محاسباتی رندرینگ، مانند محاسبه موقعیت‌های پیچیده رأس‌ها یا انجام ردیابی پرتو (ray tracing)، به یک ترِد کارگر می‌تواند عملکرد را به طور قابل توجهی بهبود بخشد.

ترِد کارگر (render-worker.js):

// render-worker.js

import { calculateVertexPositions } from './render-utils.js';

addEventListener('message', (event) => {
    const meshData = event.data;
    const updatedPositions = calculateVertexPositions(meshData);

    postMessage(updatedPositions, [updatedPositions.buffer]); // قابل انتقال
});

نخ اصلی:

// main.js

const worker = new Worker('./render-worker.js', {type: 'module'});

worker.addEventListener('message', (event) => {
    const updatedPositions = event.data;

    //به‌روزرسانی هندسه با موقعیت‌های جدید رأس‌ها
    updateGeometry(updatedPositions);
});

// ... ایجاد داده‌های مِش ...

worker.postMessage(meshData, [meshData.buffer]); //قابل انتقال

بهترین شیوه‌ها و ملاحظات

• وظایف را کوتاه و متمرکز نگه دارید: از انتقال وظایف بسیار طولانی‌مدت به ترِدهای کارگر خودداری کنید، زیرا اگر ترِد کارگر برای تکمیل کار زمان زیادی صرف کند، همچنان می‌تواند منجر به فریز شدن UI شود. وظایف پیچیده را به بخش‌های کوچکتر و قابل مدیریت‌تر تقسیم کنید.
• انتقال داده را به حداقل برسانید: انتقال داده بین نخ اصلی و ترِدهای کارگر می‌تواند پرهزینه باشد. مقدار داده‌های در حال انتقال را به حداقل برسانید و هر زمان که ممکن است از اشیاء قابل انتقال استفاده کنید.
• خطاها را به درستی مدیریت کنید: برای دریافت و مدیریت خطاهایی که در ترِدهای کارگر رخ می‌دهند، مدیریت خطای مناسب را پیاده‌سازی کنید.
• سربار را در نظر بگیرید: ایجاد و مدیریت ترِدهای کارگر مقداری سربار دارد. از ترِدهای کارگر برای وظایف جزئی که می‌توانند به سرعت روی نخ اصلی اجرا شوند، استفاده نکنید.
• اشکال‌زدایی (Debugging): اشکال‌زدایی ترِدهای کارگر می‌تواند چالش‌برانگیزتر از اشکال‌زدایی نخ اصلی باشد. از لاگ‌گیری در کنسول و ابزارهای توسعه‌دهنده مرورگر برای بررسی وضعیت ترِدهای کارگر استفاده کنید. بسیاری از مرورگرهای مدرن اکنون از ابزارهای اختصاصی اشکال‌زدایی ترِد کارگر پشتیبانی می‌کنند.
• امنیت: ترِدهای کارگر تابع سیاست همان-مبدأ (same-origin policy) هستند، به این معنی که فقط می‌توانند به منابعی از همان دامنه نخ اصلی دسترسی داشته باشند. هنگام کار با منابع خارجی به پیامدهای امنیتی بالقوه توجه داشته باشید.
• حافظه مشترک: در حالی که ترِدهای کارگر به طور سنتی از طریق ارسال پیام ارتباط برقرار می‌کنند، SharedArrayBuffer امکان حافظه مشترک بین ترِدها را فراهم می‌کند. این می‌تواند در سناریوهای خاص به طور قابل توجهی سریع‌تر باشد اما برای جلوگیری از شرایط رقابتی به همگام‌سازی دقیق نیاز دارد. استفاده از آن به دلیل ملاحظات امنیتی (آسیب‌پذیری‌های Spectre/Meltdown) اغلب محدود است و به هدرها/تنظیمات خاصی نیاز دارد. برای همگام‌سازی دسترسی به SharedArrayBuffer ها، Atomics API را در نظر بگیرید.
• تشخیص قابلیت (Feature Detection): همیشه قبل از استفاده از ترِدهای کارگر، بررسی کنید که آیا در مرورگر کاربر پشتیبانی می‌شوند یا خیر. برای مرورگرهایی که از ترِدهای کارگر پشتیبانی نمی‌کنند، یک مکانیزم جایگزین (fallback) فراهم کنید.

جایگزین‌های ترِدهای کارگر

در حالی که ترِدهای کارگر یک مکانیزم قدرتمند برای پردازش پس‌زمینه فراهم می‌کنند، همیشه بهترین راه‌حل نیستند. جایگزین‌های زیر را در نظر بگیرید:

• توابع ناهمگام (async/await): برای عملیات‌های وابسته به ورودی/خروجی (I/O-bound) (مانند درخواست‌های شبکه)، توابع ناهمگام جایگزین سبک‌تر و ساده‌تری برای ترِدهای کارگر ارائه می‌دهند.
• WebAssembly (WASM): برای وظایف محاسباتی سنگین، WebAssembly می‌تواند با اجرای کد کامپایل شده در مرورگر، عملکردی نزدیک به کد بومی (native) ارائه دهد. WASM را می‌توان مستقیماً در نخ اصلی یا در ترِدهای کارگر استفاده کرد.
• سرویس ورکرها (Service Workers): سرویس ورکرها عمدتاً برای کش کردن و همگام‌سازی پس‌زمینه استفاده می‌شوند، اما می‌توانند برای انجام وظایف دیگر در پس‌زمینه، مانند اعلان‌های فشاری (push notifications)، نیز به کار روند.

نتیجه‌گیری

ترِدهای کارگر ماژول جاوااسکریپت ابزاری ارزشمند برای ساخت اپلیکیشن‌های وب با عملکرد بالا و واکنش‌گرا هستند. با انتقال وظایف محاسباتی سنگین به ترِدهای پس‌زمینه، می‌توانید از فریز شدن UI جلوگیری کرده و تجربه کاربری روان‌تری را ارائه دهید. درک مفاهیم کلیدی، بهترین شیوه‌ها و ملاحظات ذکر شده در این مقاله شما را قادر می‌سازد تا به طور مؤثر از ترِدهای کارگر ماژول در پروژه‌های خود استفاده کنید.

قدرت چندنخی در جاوااسکریپت را در آغوش بگیرید و پتانسیل کامل اپلیکیشن‌های وب خود را آزاد کنید. با موارد استفاده مختلف آزمایش کنید، کد خود را برای عملکرد بهینه کنید و تجارب کاربری استثنایی بسازید که کاربران شما را در سراسر جهان شگفت‌زده کند.

برای مطالعه بیشتر

• مستندات وب MDN: Worker
• مستندات Node.js: Worker Threads