وب ورکر در HTML

API وب ورکر (Web Worker) در HTML

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

وب ورکر چیست؟

هنگام اجرای اسکریپت‌ها در یک صفحه HTML، صفحه تا زمانی که اجرای اسکریپت تمام شود، غیرپاسخگو (unresponsive) می‌شود.

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

وب ورکرها برای کدهای سنگینی که نمی‌توانند روی نخ اصلی (main thread) اجرا شوند، بدون اینکه باعث ایجاد وظایف طولانی و غیرپاسخگو شدن صفحه شوند، مفید هستند.

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

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

API	Web Workers
Chrome	4.0
Edge	10.0
Firefox	3.5
Safari	4.0
Opera	11.5

مثال API وب ورکر

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

مثال

شمارش اعداد: <output id="result"></output> <button>شروع ورکر</button> <button>توقف ورکر</button>

نکته: معمولاً وب ورکرها برای چنین اسکریپت‌های ساده‌ای استفاده نمی‌شوند، بلکه برای وظایفی که پردازنده را بیشتر درگیر می‌کنند (CPU intensive) به کار می‌روند!

بررسی پشتیبانی از API وب ورکر

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

مثال

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

<script>
  const x = document.getElementById("result");
  if (typeof(Worker) !== "undefined") {
    x.innerHTML = "Your browser support Web Workers!";
  } else {
    x.innerHTML = "Sorry, your browser does not support Web Workers.";
  }
</script>

ایجاد یک فایل وب ورکر با پسوند .js

حالا بیایید یک وب ورکر در یک فایل جاوا اسکریپت خارجی ایجاد کنیم.

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

var i = 0;

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

timedCount();

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

ایجاد یک شیء وب ورکر

پس از اینکه فایل وب ورکر .js را ایجاد کردیم، می‌توانیم آن را از یک صفحه HTML فراخوانی کنیم.

خطوط زیر بررسی می‌کنند که آیا یک ورکر (w) از قبل وجود دارد یا نه؛ اگر وجود نداشته باشد، یک شیء وب ورکر جدید ایجاد کرده و به فایل .js یعنی "demo_workers.js" اشاره می‌کند:

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

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

داده‌ها بین وب ورکرها و نخ اصلی از طریق یک سیستم پیام‌رسانی منتقل می‌شوند - هر دو طرف پیام‌های خود را با استفاده از متد postMessage() ارسال می‌کنند و به پیام‌ها از طریق رویداد onmessage پاسخ می‌دهند.

یک شنونده رویداد (event listener) onmessage به شیء وب ورکر اضافه کنید.

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

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

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

وقتی یک شیء وب ورکر ایجاد می‌شود، تا زمانی که به آن خاتمه داده نشود، به گوش دادن به پیام‌ها ادامه خواهد داد.

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

w.terminate();

استفاده مجدد از وب ورکر

اگر متغیر وب ورکر را پس از خاتمه دادن به آن، برابر undefined قرار دهید، می‌توانید دوباره از آن ورکر/کد استفاده کنید:

w = undefined;

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

ما قبلاً کد وب ورکر را در فایل .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>
      let w;

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

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

وب ورکرها و DOM

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

شیء window
شیء document
شیء parent

API	Web Workers
Chrome	4.0
Edge	10.0
Firefox	3.5
Safari	4.0
Opera	11.5

API

Web Workers

Chrome

4.0

Edge

10.0

Firefox

3.5

Safari

4.0

Opera

11.5

<script> const x = document.getElementById("result"); if (typeof(Worker) !== "undefined") { x.innerHTML = "Your browser support Web Workers!"; } else { x.innerHTML = "Sorry, your browser does not support Web Workers."; } </script>

<!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> let w; function startWorker() { const x = document.getElementById("result"); if (typeof(Worker) !== "undefined") { if (typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function(event) { x.innerHTML = event.data; }; } else { x.innerHTML = "Sorry! No Web Worker support."; } } function stopWorker() { w.terminate(); w = undefined; } </script> </body> </html>