آشنایی با Worker ها (۱)

در این پست کوتاه میخوام در مورد JavaScript Worker ها صحبت کنم. ما ۲تا worker داریم Web Workers و Service Workers که در این پست چند قسمتی با این ۲ بیشتر آشنا میشیم و نحوه استفاده ازشون رو یاد میگیریم.

Photo by Flávio Santos on Unsplash
Photo by Flávio Santos on Unsplash

برای این منظور اول باید ببینیم این worker ها چی هستن و چرا باید ازشون استفاده کنیم:

خب Worker چی هست و چرا بهش نیاز داریم؟

ورکر(Worker) کد های جاوا اسکریپتی هستن که خارج از thread ئه اصلی مرورگر اجرا میشن و شما با کمکشون اگر عملیات سنگین یا زمان بری دارین بدون block کردن thread اصلی که کاربر باهاش سروکار داره به هدفتون برسین. و باعث کندی/لگ در تجربه کاربری کاربرانتون نشین. در نظر داشته باشین که شما در worker ها به dom دسترسی ندارین در نتیجه نمیتونین از توشون UI رو آپدیت کنین.

آشنایی با Web Workers

این ورکر زمان زیادی هست که در دسترسه و برعکس Service Workers قابلیت ها و امکانات اون رو نداره ولی اگر عملیات سنگین و زمان بری دارین بهترین گزینه هست.

همونطور که گفتم در worker ها شما دسترسی به dom ندارین پس چگونه داده رو میشه ردوبدل کرد با thread اصلی؟ راه نجات ما message ها هستن بیاین به تیکه کد زیر که یک web worker هست و فاکتوریل عددی که thread اصلی بهش میده رو حساب میکنه و نتیجه رو بهش برمیگردونه:

//webworker1.js
self.onmessage = event => { 
    let num = event.data.number;
     if (num === 0 || num === 1)  
         self.postMessage(1); 
     let result = num;
     while (num > 1)
      {
          num--;
          result *= num;
       }
      self.postMessage(result); 
  };

و در main.js و فایل اصلیمون:

//main.js
const worker = new Worker('webworker.js'); // ایجاد worker
worker.postMessage({ number: 8 }); // ارسال message
worker.onmessage = event => { // انتظار برای دریافت نتیجه
    console.log(`Result is: ${event.data}`);
};

خب یه نمونه وب ورکر نوشتیم و یه کاری هم بهش سپردیم. این کار میتونه کارهای سنگین تر و پیچیده تری هم باشه لازم نیست حتما فاکتوریل یه عدد باشه. ازونجایی که web worker زمان زیادی هست که در دسترسه در نتیجه اگر مرورگر مال زمان دقیانوس نباشه حتما از web worker پشتیبانی میکنه.


برای این سری پست میخوام تا جایی که بلدم این ۲ worker رو با هم بریم جلو. برای شروع کار یاد این پست که به صورت خلاصه این دو رو معرفی کرده افتادم که یکی از دوستان چند وقت پیش برام ارسال کردن و منم برای شروع این پست ازش استفاده کردم که در واقع این پست برداشت آزادی از اون پست هست که کلیات و مفهوم اولیه رو با کمکش میرم جلو و بعد از اون یه مقدار deep تر این ۲ رو با هم بررسی خواهیم کرد.