استفاده از Web workers HTML5

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 01 آذر 1399

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

توضیحات درباره Web workers

استفاده از web workers در HTML5 به شما امکان می دهد جلوی انجماد صفحه وب خود را از اجرای کارهای بزرگتر بگیرید. یک کاربر وب ، کار را در پس زمینه انجام می دهد ، مستقل از اسکریپت های دیگر و بنابراین بر عملکرد آنها تأثیر نمی گذارد. این فرایند همچنین نخ کشیدن نامیده می شود ، یعنی کارها را به چندین رشته موازی تفکیک می کند. در طول زمان ، کاربر می تواند به طور معمول مرور کند ، زیرا صفحه کاملاً پاسخگو باقی می ماند.

برای دیدن آموزش رایگان CSS و کسب اطلاعات در این زمینه به شما پیشنهاد می‌کنیم مقالات این دسته را از سایت دویکس را مطالعه کنید.

مزایای استفاده از Web Workers

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

موارد استفاده از Web Workers

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

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

ایجاد و استفاده از Web Workers در HTML5 نسبتاً ساده است.

برای این کار به دو فایل JavaScript نیاز دارید:

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

در فایل اصلی، باید یک نمونه از Web Worker ایجاد کنید و URL فایل Web Worker را به آن منتقل کنید.

سپس می‌توانید از روش‌های مختلفی برای ارسال پیام به Web Worker و دریافت پاسخ از آن استفاده کنید.

در مثال زیر ، می توانید یک اسکریپت ساده برای یک Web worker ایجاد کنید که برای شمارش اعداد ساخته شده است:

var i=0;

function timedCount() {
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()", 500);
}

timedCount();

اسکریپت شامل یک روش postMessage است که امکان ارسال پیام (به عنوان مثال ، اعداد) را به یک سند HTML امکان پذیر می کند. با این حال ، از وب کاربران معمولاً از این قبیل وظایف ساده استفاده نمی شود که به هر حال از CPU زیادی استفاده نمی کنند و عملکرد وب را مختل می کنند.

یک کد کامل web workers

کد کاربران وب در HTML5 باید در یک پرونده JavaScript خارجی ذخیره شود. با این حال ، برای اینکه آن ها به درستی کار کنند ، باید برخی از کدها را در سند HTML خود قرار دهید:

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="res"></output></p>
<button onclick="startCounting()">Start Counting</button> 
<button onclick="stopWorker()">Stop Counting</button>

<p><strong>Note:</strong>All Internet Explorer versions before 9, do not support the Web Workers.</p>

<script>
 var l;
 
function startCounting() {
  console.log("Worker started");
  if(typeof(Worker) !== "undefined") {
    if(typeof(l) == "undefined") {
      l = new Worker("demo_workers.js");
    }
    l.onmessage = function(event) {
      document.getElementById("res").innerHTML = event.data;
    };
  } else {
    document.getElementById("res").innerHTML = "Browser does not support Workers";
  }
}
 
function stopWorker() { 
  console.log("Worker terminated");
  l.terminate();
  l = undefined;
}
</script>

</body>
</html>

مهمترین قسمت های کد را در جدول زیر توضیح خواهیم داد.

Meaning	Code section
متغیر جهانی را تنظیم می کند	var l; function startCounting() {
کاربر وب را اولیه میکند	if(typeof(l) == “undefined”) { l = new Worker(“demo_workers.js”); }
گوش دادن به پیام ها و به روزرسانی صفحه متناسب با آن را مجاز می کند	l.onmessage = function(event) { document.getElementById(“res”).innerHTML = event.data; };
اگر مرورگر وی از وب کارگران پشتیبانی نمی کند ، به کاربر اطلاع می دهد	} else { document.getElementById(“res”).innerHTML = “Browser does not support Workers”; } }
وب کارگر را خاتمه می دهد	function stopWorker() { console.log(“Worker terminated”); l.terminate(); l = undefined; }

نکات مهم استفاده از web workers HTML5

با استفاده از توابع جاوا اسکریپت setInterval و setTimeout ، می توانید کاربران وب را به انجام کارهای دوره ای وادار کنید.
با استفاده از web wokers نمی توانید به عناصر DOM دسترسی پیدا کنید ، بنابراین در اسکریپت های آن ها هیچ کدام را وارد نکنید.
مطمئن نیستید چه زمانی از web workers استفاده کنید؟ معمول ترین وظایف شامل املا sp ، برجسته سازی نحو ، پیش تنظیم و ذخیره داده ها است.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊