Web Workers برای Multithreading در جاوا اسکریپت

Summarize this content to 400 words in Persian Lang
جاوا اسکریپت کد را در یک دنباله اجرا می کند که به آن تک رشته می گویند. این طراحی برای کارهای ساده در مرورگرهای وب به خوبی کار می‌کند، اما زمانی که رشته اصلی توسط کارهای سنگین، مانند محاسبات پیچیده یا عملیات پس‌زمینه مسدود می‌شود، می‌تواند مشکلاتی ایجاد کند. این کارها می تواند صفحه را کند کند و پاسخگو نباشد. برای حل این مشکل، جاوا اسکریپت Web Workers را ارائه می‌کند که به شما امکان می‌دهد کارهای سنگین را به یک رشته جداگانه منتقل کنید و رشته اصلی را برای تعامل راحت با کاربر آزاد نگه دارید.

کارگران وب چیست؟

Web Workers یکی از ویژگی‌های Web API است که به کد جاوا اسکریپت اجازه می‌دهد در پس‌زمینه روی یک رشته مجزا اجرا شود. این رفتار شبیه به چند رشته را قادر می‌سازد و عملکرد را با بارگیری وظایف با منابع فشرده از رشته اصلی بهبود می‌بخشد.

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

نحوه استفاده از Web Workers

در اینجا یک راهنمای گام به گام برای استفاده از Web Workers آورده شده است:

یک فایل Worker ایجاد کنید
Web Workers نیاز به یک فایل جاوا اسکریپت جداگانه حاوی کد برای اجرا در پس زمینه دارند. به عنوان مثال، یک فایل به نام ایجاد کنید worker.js:

// worker.js
self.onmessage = function(event) {
const data = event.data;
const result = performHeavyComputation(data);
self.postMessage(result);
};

function performHeavyComputation(input) {
// Simulate a CPU-intensive task
let total = 0;
for (let i = 0; i < 1e7; i++) {
total += i * input;
}
return total;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Worker را در موضوع اصلی راه اندازی کنید
استفاده کنید Worker سازنده برای ایجاد یک نمونه از worker در اسکریپت اصلی خود:

// main.js
const worker = new Worker(‘worker.js’);

// Send data to the worker
worker.postMessage(42);

// Receive data from the worker
worker.onmessage = function(event) {
console.log(‘Result from worker:’, event.data);
};

// Handle errors
worker.onerror = function(error) {
console.error(‘Worker error:’, error.message);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کار را خاتمه دهید

وقتی کار کارگر کامل شد، یا اگر دیگر نیازی به آن نیست، آن را خاتمه دهید تا منابع آزاد شود:

worker.terminate();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال: مرتب سازی یک آرایه بزرگ

مرتب سازی یک آرایه بزرگ می تواند رشته اصلی را مسدود کند و باعث یخ زدن رابط کاربر شود. بیایید از Web Worker برای انجام این کار استفاده کنیم:

فایل کارگر (sortWorker.js):

self.onmessage = function(event) {
const sortedArray = event.data.sort((a, b) => a – b);
self.postMessage(sortedArray);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اسکریپت اصلی:

const largeArray = Array.from({ length: 1e6 }, () => Math.random());
const sortWorker = new Worker(‘sortWorker.js’);

sortWorker.postMessage(largeArray);

sortWorker.onmessage = function(event) {
console.log(‘Sorted array:’, event.data);
};

sortWorker.onerror = function(error) {
console.error(‘Error in sorting worker:’, error.message);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برخی از مزایای کارگران وب

عملکرد بهبود یافته: بارگذاری وظایف در یک رشته جداگانه از مسدود شدن موضوع اصلی جلوگیری می کند.

تجربه کاربری بهتر: رابط کاربری حتی در طول عملیات فشرده پاسخگو باقی می ماند.

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

محدودیت های چهره توسعه دهنده Web Workers

با مزایا، برخی از معایب و محدودیت‌های Web Workers وجود دارد.

دسترسی به DOM وجود ندارد: کارگران نمی توانند مستقیماً DOM را دستکاری کنند.

جداسازی زمینه: کارگران دامنه جهانی خود را دارند و نمی توانند به متغیرها یا توابع در رشته اصلی دسترسی داشته باشند.

سربار: ایجاد و برقراری ارتباط با کارگران هزینه دارد و آنها را برای کارهای بسیار کوچک نامناسب می کند.

نتیجه گیری وب کارگران

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

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

// worker.js
self.onmessage = function(event) {
    const data = event.data;
    const result = performHeavyComputation(data);
    self.postMessage(result);
};

function performHeavyComputation(input) {
    // Simulate a CPU-intensive task
    let total = 0;
    for (let i = 0; i < 1e7; i++) {
        total += i * input;
    }
    return total;
}

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

// Send data to the worker
worker.postMessage(42);

// Receive data from the worker
worker.onmessage = function(event) {
    console.log('Result from worker:', event.data);
};

// Handle errors
worker.onerror = function(error) {
    console.error('Worker error:', error.message);
};

worker.terminate();

self.onmessage = function(event) {
    const sortedArray = event.data.sort((a, b) => a - b);
    self.postMessage(sortedArray);
};

const largeArray = Array.from({ length: 1e6 }, () => Math.random());
const sortWorker = new Worker('sortWorker.js');

sortWorker.postMessage(largeArray);

sortWorker.onmessage = function(event) {
    console.log('Sorted array:', event.data);
};

sortWorker.onerror = function(error) {
    console.error('Error in sorting worker:', error.message);
};