٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش وب کارگران HTML

وب کارگر یک JavaScript است که در پس زمینه اجرا می شود ، بدون اینکه بر عملکرد صفحه تأثیر بگذارد. وب کارگر چیست؟ هنگام اجرای اسکریپت ها در یک صفحه HTML ، صفحه تا زمان پایان اسکریپت پاسخ نمی دهد.…

محمد یوسفی

3 جولای 2021

وب کارگر یک JavaScript است که در پس زمینه اجرا می شود ، بدون اینکه بر عملکرد صفحه تأثیر بگذارد.


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

هنگام اجرای اسکریپت ها در یک صفحه HTML ، صفحه تا زمان پایان اسکریپت پاسخ نمی دهد.

وب کارگر یک جاوا اسکریپت است که در پس زمینه ، مستقل از اسکریپت های دیگر ، بدون تأثیر بر عملکرد صفحه ، اجرا می شود. در حالی که کارگر وب در پس زمینه اجرا می شود ، می توانید به انجام هر کاری که می خواهید ادامه دهید: کلیک کردن ، انتخاب موارد و غیره.


پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل از Web Workers پشتیبانی می کند.

مثال HTML HTML Workers

مثال زیر یک وب کارگر ساده ایجاد می کند که اعداد را در پس زمینه شمارش می کند:

مثال Count numbers:

 


پشتیبانی وب کارگر را بررسی کنید

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

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}

یک پرونده وب کارگر ایجاد کنید

حال ، بیایید وب کارگر خود را در یک JavaScript خارجی ایجاد کنیم.

در اینجا ، ما یک اسکریپت ایجاد می کنیم که قابل شمارش است. اسکریپت در پرونده “demo_workers.js” ذخیره شده است:

var i = 0;

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

timedCount();

قسمت مهم کد بالا postMessage()روش است – که برای ارسال پیام به صفحه HTML استفاده می شود.

توجه: به طور معمول از وب کارگران برای چنین اسکریپت های ساده ای استفاده نمی شود ، بلکه برای کارهای بیشتر پردازنده استفاده می شود.


ایجاد یک کارگر وب

اکنون که پرونده وب کارگر را در اختیار داریم ، باید آن را از یک صفحه HTML فراخوانی کنیم.

خطوط زیر بررسی می کند که آیا کارگر از قبل وجود دارد یا خیر – این یک شی web وب کارگر جدید ایجاد می کند و کد را در “demo_workers.js” اجرا می کند:

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

سپس می توانیم از طریق وب کارگر پیام ارسال و دریافت کنیم.

شنونده رویداد “onmessage” را به وب کارگر اضافه کنید.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

وقتی کارگر وب پیامی را ارسال می کند ، کد درون شنونده رویداد اجرا می شود. داده های کارگر وب در event.data ذخیره می شود.


یک وب کارگر را خاتمه دهید

هنگامی که یک شی وب کارگر ایجاد می شود ، تا پایان یافتن پیام برای گوش دادن به پیام (حتی پس از پایان اسکریپت خارجی) ادامه خواهد داشت.

برای خاتمه یک کارگر وب و منابع رایگان مرورگر / رایانه ، از terminate()روش زیر استفاده کنید:

w.terminate();

از Web Worker استفاده مجدد کنید

اگر متغیر کارگر را روی تعریف نشده تنظیم کنید ، پس از پایان یافتن آن ، می توانید از کد استفاده مجدد کنید:

w = undefined;

کد مثال کامل کارگر وب

ما قبلاً کد Worker را در پرونده .js مشاهده کرده ایم. در زیر کد صفحه HTML آورده شده است:

مثال

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

وب کارگران و DOM

از آنجا که کارگران وب در پرونده های خارجی هستند ، به اشیا Java JavaScript زیر دسترسی ندارند:

  • شی پنجره
  • شی document سند
  • شی parent والدین

 

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها