استفاده از Web workers

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

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

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

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

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

در مثال زیر ، می توانید یک اسکریپت ساده برای یک 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>

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

MeaningCode 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 ، برجسته سازی نحو ، پیش تنظیم و ذخیره داده ها است.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

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

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