Web Workers: فعال‌سازی پردازش موازی در جاوا اسکریپت

در چشم‌انداز توسعه وب امروزی، ایجاد برنامه‌های وب پاسخگو و با کارایی بالا امری ضروری است. کاربران انتظار تعاملات روان و زمان بارگذاری سریع را دارند. با این حال، جاوا اسکریپت که تک رشته‌ای است، گاهی اوقات می‌تواند در پردازش وظایف محاسباتی سنگین بدون مسدود کردن رابط کاربری مشکل داشته باشد. اینجاست که Web Workers به کمک می‌آیند و راهی برای اجرای اسکریپت‌ها در رشته‌های پس‌زمینه ارائه می‌دهند و به طور موثر پردازش موازی را در جاوا اسکریپت فعال می‌کنند.

Web Workers چیستند؟

Web Workers راهی ساده برای اجرای اسکریپت‌ها در رشته‌های پس‌زمینه برای محتوای وب هستند. آنها به شما امکان می‌دهند تا وظایف را به صورت موازی با رشته اجرای اصلی برنامه وب، بدون مسدود کردن رابط کاربری، انجام دهید. این امر به ویژه برای وظایفی که از نظر محاسباتی سنگین هستند، مانند پردازش تصویر، تجزیه و تحلیل داده‌ها یا محاسبات پیچیده، مفید است.

اینطور تصور کنید: شما یک سرآشپز اصلی (رشته اصلی) دارید که در حال آماده کردن یک وعده غذایی (برنامه وب) است. اگر سرآشپز مجبور باشد همه کارها را به تنهایی انجام دهد، ممکن است زمان زیادی طول بکشد و مشتریان (کاربران) بی‌تاب شوند. Web Workers مانند دستیاران آشپزی هستند که می‌توانند وظایف خاصی (پردازش پس‌زمینه) را به طور مستقل انجام دهند و به سرآشپز اصلی اجازه دهند تا بر جنبه‌های مهم‌تر تهیه غذا (رندر رابط کاربری و تعاملات کاربر) تمرکز کند.

چرا از Web Workers استفاده کنیم؟

مزیت اصلی استفاده از Web Workers بهبود عملکرد و پاسخگویی برنامه‌های وب است. با انتقال وظایف محاسباتی سنگین به رشته‌های پس‌زمینه، می‌توانید از مسدود شدن رشته اصلی جلوگیری کنید و اطمینان حاصل کنید که رابط کاربری روان و در برابر تعاملات کاربر پاسخگو باقی می‌ماند. در اینجا برخی از مزایای کلیدی آورده شده است:

• پاسخگویی بهبود یافته: از قفل شدن رابط کاربری جلوگیری می‌کند و تجربه کاربری روان را حفظ می‌کند.
• پردازش موازی: اجرای همزمان وظایف را امکان‌پذیر می‌سازد و زمان پردازش کلی را سرعت می‌بخشد.
• عملکرد بهبود یافته: استفاده از منابع را بهینه می‌کند و بار رشته اصلی را کاهش می‌دهد.
• کد ساده‌تر: به شما امکان می‌دهد وظایف پیچیده را به واحدهای کوچک‌تر و قابل مدیریت‌تر تقسیم کنید.

موارد استفاده برای Web Workers

Web Workers برای طیف وسیعی از وظایفی که می‌توانند از پردازش موازی بهره‌مند شوند، مناسب هستند. در اینجا برخی از موارد استفاده متداول آورده شده است:

• پردازش تصویر و ویدئو: اعمال فیلترها، تغییر اندازه تصاویر، یا رمزگذاری/رمزگشایی فایل‌های ویدئویی. به عنوان مثال، یک وب‌سایت ویرایش عکس می‌تواند از Web Workers برای اعمال فیلترهای پیچیده بر روی تصاویر بدون کند کردن رابط کاربری استفاده کند.
• تجزیه و تحلیل داده‌ها و محاسبات: انجام محاسبات پیچیده، دستکاری داده‌ها، یا تجزیه و تحلیل آماری. ابزار تحلیل مالی را در نظر بگیرید که از Web Workers برای انجام محاسبات بلادرنگ بر روی داده‌های بازار سهام استفاده می‌کند.
• همگام‌سازی پس‌زمینه: مدیریت همگام‌سازی داده‌ها با سرور در پس‌زمینه. یک ویرایشگر اسناد مشترک را تصور کنید که از Web Workers برای ذخیره خودکار تغییرات در سرور بدون وقفه در روند کار کاربر استفاده می‌کند.
• توسعه بازی: مدیریت منطق بازی، شبیه‌سازی‌های فیزیک، یا محاسبات هوش مصنوعی. Web Workers می‌توانند با مدیریت این وظایف در پس‌زمینه، عملکرد بازی‌های مبتنی بر مرورگر پیچیده را بهبود بخشند.
• برجسته کردن سینتکس کد: برجسته کردن کد در یک ویرایشگر کد می‌تواند یک وظیفه پرمصرف CPU باشد. با استفاده از وب ورکرها، رشته اصلی پاسخگو باقی می‌ماند و تجربه کاربری به طور چشمگیری بهبود می‌یابد.
• ری تریسینگ و رندرینگ سه‌بعدی: این فرآیندها بسیار فشرده محاسباتی هستند و نامزدهای ایده‌آلی برای اجرا در یک ورکر هستند.

Web Workers چگونه کار می‌کنند

Web Workers در یک محدوده سراسری جداگانه نسبت به رشته اصلی عمل می‌کنند، به این معنی که آنها دسترسی مستقیمی به DOM یا سایر منابع غیر ایمن رشته‌ای ندارند. ارتباط بین رشته اصلی و Web Workers از طریق ارسال پیام حاصل می‌شود.

ایجاد یک Web Worker

برای ایجاد یک Web Worker، به سادگی یک شی Worker جدید را نمونه‌سازی می‌کنید و مسیر اسکریپت ورکر را به عنوان آرگومان به آن می‌دهید:

            const worker = new Worker('worker.js');
            

              
                Copy
              
            
          

worker.js یک فایل جاوا اسکریپت جداگانه است که حاوی کدی است که باید در رشته پس‌زمینه اجرا شود.

ارتباط با یک Web Worker

ارتباط بین رشته اصلی و Web Worker با استفاده از متد postMessage() و هندلر رویداد onmessage انجام می‌شود.

ارسال پیام به یک Web Worker:

            worker.postMessage({ task: 'calculateSum', numbers: [1, 2, 3, 4, 5] });
            

              
                Copy
              
            
          

دریافت پیام در Web Worker:

            self.onmessage = function(event) { 
  const data = event.data;
  if (data.task === 'calculateSum') {
    const sum = data.numbers.reduce((a, b) => a + b, 0);
    self.postMessage({ result: sum });
  }
};
            

              
                Copy
              
            
          

دریافت پیام در رشته اصلی:

            worker.onmessage = function(event) {
  const data = event.data;
  console.log('Result from worker:', data.result);
};
            

              
                Copy
              
            
          

خاتمه دادن به یک Web Worker

هنگامی که کارتان با یک Web Worker تمام شد، مهم است که آن را برای آزاد کردن منابع خاتمه دهید. می‌توانید این کار را با استفاده از متد terminate() انجام دهید:

            worker.terminate();
            

              
                Copy
              
            
          

انواع Web Workers

انواع مختلفی از Web Workers وجود دارد که هر کدام مورد استفاده خاص خود را دارند:

• Dedicated Workers: با یک اسکریپت واحد مرتبط هستند و فقط توسط آن اسکریپت قابل دسترسی هستند. آنها رایج‌ترین نوع Web Worker هستند.
• Shared Workers: توسط اسکریپت‌های متعدد از مبدأهای مختلف قابل دسترسی هستند. آنها به تنظیمات پیچیده‌تری نیاز دارند و برای سناریوهایی که چندین اسکریپت نیاز به اشتراک‌گذاری یک ورکر دارند، مناسب هستند.
• Service Workers: به عنوان پروکسی سرور بین برنامه‌های وب، مرورگر و شبکه عمل می‌کنند. آنها معمولاً برای ذخیره‌سازی و پشتیبانی آفلاین استفاده می‌شوند. Service Workers نوع خاصی از Web Worker با قابلیت‌های پیشرفته هستند.

مثال: پردازش تصویر با Web Workers

بیایید نشان دهیم که چگونه Web Workers می‌توانند برای انجام پردازش تصویر در پس‌زمینه استفاده شوند. فرض کنید یک برنامه وب دارید که به کاربران اجازه می‌دهد تصاویر را آپلود کرده و فیلترها را اعمال کنند. اعمال یک فیلتر پیچیده در رشته اصلی می‌تواند رابط کاربری را مسدود کند و منجر به تجربه کاربری ضعیف شود. Web Workers می‌توانند به حل این مشکل کمک کنند.

HTML (index.html):

            <input type="file" id="imageInput">
<canvas id="imageCanvas"></canvas>
            

              
                Copy
              
            
          

JavaScript (script.js):

            const imageInput = document.getElementById('imageInput');
const imageCanvas = document.getElementById('imageCanvas');
const ctx = imageCanvas.getContext('2d');

const worker = new Worker('imageWorker.js');

imageInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(event) {
    const img = new Image();
    img.onload = function() {
      imageCanvas.width = img.width;
      imageCanvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      const imageData = ctx.getImageData(0, 0, img.width, img.height);

      worker.postMessage({ imageData: imageData, width: img.width, height: img.height });
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(file);
});

worker.onmessage = function(event) {
  const processedImageData = event.data.imageData;
  ctx.putImageData(processedImageData, 0, 0);
};
            

              
                Copy
              
            
          

JavaScript (imageWorker.js):

            self.onmessage = function(event) {
  const imageData = event.data.imageData;
  const width = event.data.width;
  const height = event.data.height;

  // Apply a grayscale filter
  for (let i = 0; i < imageData.data.length; i += 4) {
    const avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;
    imageData.data[i] = avg; // Red
    imageData.data[i + 1] = avg; // Green
    imageData.data[i + 2] = avg; // Blue
  }

  self.postMessage({ imageData: imageData });
};
            

              
                Copy
              
            
          

در این مثال، هنگامی که کاربر تصویری را آپلود می‌کند، رشته اصلی داده‌های تصویر را به Web Worker ارسال می‌کند. Web Worker یک فیلتر خاکستری را بر روی داده‌های تصویر اعمال کرده و داده‌های پردازش شده را به رشته اصلی بازمی‌گرداند، که سپس Canvas را به‌روزرسانی می‌کند. این امر رابط کاربری را حتی برای تصاویر بزرگتر و فیلترهای پیچیده‌تر، پاسخگو نگه می‌دارد.

بهترین شیوه‌ها برای استفاده از Web Workers

برای استفاده موثر از Web Workers، بهترین شیوه‌های زیر را در نظر بگیرید:

• اسکریپت‌های ورکر را سبک نگه دارید: از گنجاندن کتابخانه‌ها یا کدهای غیرضروری در اسکریپت‌های ورکر خود اجتناب کنید تا سربار ایجاد و راه‌اندازی ورکرها به حداقل برسد.
• ارتباط را بهینه کنید: میزان داده‌های منتقل شده بین رشته اصلی و ورکرها را به حداقل برسانید. در صورت امکان از اشیاء قابل انتقال برای جلوگیری از کپی کردن داده‌ها استفاده کنید.
• خطاها را به خوبی مدیریت کنید: پیاده‌سازی مدیریت خطا در اسکریپت‌های ورکر خود برای جلوگیری از خرابی‌های غیرمنتظره. از هندلر رویداد onerror برای گرفتن خطاها و ثبت مناسب آنها استفاده کنید.
• ورکرها را پس از اتمام خاتمه دهید: ورکرها را زمانی که دیگر نیازی به آنها نیست، خاتمه دهید تا منابع آزاد شوند.
• به استخر نخ (Thread Pool) فکر کنید: برای وظایف بسیار فشرده CPU، پیاده‌سازی استخر نخ را در نظر بگیرید. استخر نخ نمونه‌های ورکر موجود را مجدداً استفاده می‌کند تا از هزینه ایجاد و تخریب مکرر اشیاء ورکر جلوگیری کند.

محدودیت‌های Web Workers

در حالی که Web Workers مزایای قابل توجهی را ارائه می‌دهند، آنها همچنین دارای برخی محدودیت‌ها هستند:

• دسترسی محدود به DOM: Web Workers نمی‌توانند مستقیماً به DOM دسترسی پیدا کنند. آنها فقط می‌توانند از طریق ارسال پیام با رشته اصلی ارتباط برقرار کنند.
• عدم دسترسی به شیء Window: Web Workers به شیء window یا سایر اشیاء سراسری موجود در رشته اصلی دسترسی ندارند.
• محدودیت‌های دسترسی به فایل: Web Workers دسترسی محدودی به سیستم فایل دارند.
• چالش‌های اشکال‌زدایی: اشکال‌زدایی Web Workers می‌تواند چالش‌برانگیزتر از اشکال‌زدایی کد در رشته اصلی باشد. با این حال، ابزارهای توسعه‌دهنده مرورگر مدرن از اشکال‌زدایی Web Workers پشتیبانی می‌کنند.

جایگزین‌های Web Workers

در حالی که Web Workers ابزاری قدرتمند برای پردازش موازی در جاوا اسکریپت هستند، رویکردهای جایگزینی نیز وجود دارند که بسته به نیازهای خاص خود ممکن است بخواهید آنها را در نظر بگیرید:

• requestAnimationFrame: برای زمان‌بندی انیمیشن‌ها و سایر به‌روزرسانی‌های بصری استفاده می‌شود. در حالی که پردازش موازی واقعی را ارائه نمی‌دهد، اما با تقسیم وظایف به قطعات کوچک‌تر که می‌توانند در چرخه بازسازی مرورگر اجرا شوند، به بهبود عملکرد درک شده کمک می‌کند.
• setTimeout و setInterval: برای زمان‌بندی اجرای وظایف پس از یک تأخیر مشخص یا در فواصل زمانی منظم استفاده می‌شوند. این متدها می‌توانند برای انتقال وظایف از رشته اصلی استفاده شوند، اما پردازش موازی واقعی را ارائه نمی‌دهند.
• توابع ناهمزمان (async/await): برای نوشتن کدهای ناهمزمان که خواندن و نگهداری آنها آسان‌تر است، استفاده می‌شود. توابع ناهمزمان پردازش موازی واقعی را ارائه نمی‌دهند، اما با اجازه دادن به رشته اصلی برای ادامه اجرا در حالی که منتظر تکمیل عملیات ناهمزمان است، می‌توانند به بهبود پاسخگویی کمک کنند.
• OffscreenCanvas: این API یک Canvas ارائه می‌دهد که می‌تواند در یک رشته جداگانه رندر شود و امکان انیمیشن‌های روان‌تر و عملیات گرافیکی فشرده را فراهم می‌کند.

نتیجه‌گیری

Web Workers ابزار ارزشمندی برای بهبود عملکرد و پاسخگویی برنامه‌های وب با فعال کردن پردازش موازی در جاوا اسکریپت هستند. با انتقال وظایف محاسباتی سنگین به رشته‌های پس‌زمینه، می‌توانید از مسدود شدن رشته اصلی جلوگیری کنید و از تجربه کاربری روان و پاسخگو اطمینان حاصل کنید. در حالی که آنها محدودیت‌های خاصی دارند، Web Workers تکنیک قدرتمندی برای بهینه‌سازی عملکرد برنامه وب و ایجاد تجربیات کاربری جذاب‌تر هستند.

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

مطالعه بیشتر

• MDN Web Workers API
• HTML5 Rocks: A Simple Worker Example
• JavaScript.info: Web Workers