100% کامل شده تا

Web Workers بوسیله API در اچ‌تی‌ام‌ال (HTML Web Workers API)

از موتو کد، دانشنامهٔ برنامه‌نویسی


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


Web Worker چیست؟

با اجرای اسکریپت‌ها در صفحه HTML، صفحه تا زمان اتمام اسکریپت غیرواکنش‌گرا (Unresponsive) می‌شود.[۱]

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



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

اعداد در جدول زیر نشان دهنده اولین نسخه مرورگرها هستند که از web workerها به‌طور کامل پشتیبانی می‌کنند.

API Chrome Internet Explorer / Edge Firefox Safari Opera
Web Workers ۴٫۰ ۱۰٫۰ ۳٫۵ ۴٫۰ ۱۱٫۵




مثالی از Web Workerها در HTML

مثال زیر یک web worker ساده را ایجاد می‌کند که اعداد را در پس‌زمینه شمارش می‌کند:

مثال

Responsive demo.svg


بررسی پشتیبانی Web Worker

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

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




ایجاد یک فایل Web Worker

اکنون، می‌خواهیم web worker خود را در یک جاوااسکریپت خارجی ایجاد کنیم.

در اینجا، اسکریپتی ایجاد می‌کنیم که شمارش می‌کند. این اسکریپت در فایل "demo_workers.js" ذخیره می‌شود:

var i = 0;

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

timedCount();


بخش مهم کد بالا متد postMessage() است - که برای ارسال (Post) پیام به صفحه HTML استفاده می‌شود.

توجه: web workerها معمولاً نه تنها برای چنین اسکریپت‌های ساده ای استفاده نمی‌شوند بلکه برای وظایف حساس به CPU بیشتر مورد استفاده قرار می‌گیرند.


ایجاد یک شیء Web Worker

حالا که فایل web worker را داریم، باید از یک صفحه HTML آن را فراخوانی کنیم.

خطوط زیر بررسی می‌کنند آیا worker از قبل وجود داشته یا نه، اگر وجود داشته - یک شیء web worker جدید ایجاد می‌کند و کد را در "demo_workers.js" اجرا می‌کند:

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


سپس می‌توانیم به web worker پیام ارسال و دریافت کنیم.

یک شنونده رویداد "onmessage" را به web worker اضافه می‌کنیم.

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


هنگامی که web worker پیامی را ارسال کند، کد داخل شنونده رویداد اجرا می‌شود. داده از web worker در event.data ذخیره می‌شود.



یک Web Worker را متوقف کنید

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

برای از بین بردن یک web worker، و آزاد کردن منابع کامپیوتر/مرورگر، از متد terminate() استفاده کنید:

w.terminate();


استفاده مجدد از Web Worker

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

w = undefined;


کد مثال کامل Web Worker

پیش از این کد 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>



Web Workerها و DOM

از آنجایی که web workerها در فایل‌های خارجی هستند، به اشیاء جاوا اسکریپتی زیر دسترسی ندارند:

  • شیء ویندوز (window object)
  • شیء سند (document object)
  • شیء والد (parent object)

منابع آموزشی




به‌روزرسانی شده: ۲۱ روز پیش