آموزش Web Workers در HTML

Ratings
(0)

 

به اجرای جاوا اسکریپت در پس زمینه، بدون اینکه روی کاراییِ(performance) صفحه تاثیری گذاشته شود، web worker گفته می شود.

Web Worker چیست؟

وقتی که اسکریپت ها در یک صفحه ی HTML اجرا می شوند، این صفحه تا زمانی که اسکریپت مورد نظر پایان یابد، بی پاسخ یا بی ارتباط(unresponsive) می شود. web worker یک کد جاوا اسکریپت است که در پس زمینه(background) و به طور مستقل از دیگر اسکریپت ها، اجرا می شود؛ بدون اینکه بر روی کاراییِ صفحه، تاثیری بگذارد. وقتی که web worker در پس زمینه اجرا می شود، می توانیم هر کاری که می خواهیم انجام دهیم: یعنی می توانیم کلیک کنیم، چیزها را انتخاب کنیم و غیره.

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

اعداد درون جدول زیر، اولین ورژن مرورگری را مشخص می کنند که کاملاً از Web Workers پشتیبانی می کند:

API
 4.0  10.0  3.5  11.5  4.0 Web Workers

یک مثال از Web Workers در HTML

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

مثال شماره 1

 

شمارش اعداد:

امتحان کنید

 

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

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

if (typeof(Worker) !== "undefined") {
  // بله از وب ورکر پشتیانی می شود
  // مقداری کد...
} else {
  // متاسفانه از وب ورکر پشتیبانی نمی شود
}

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

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

var i = 0;

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

timedCount();

مهمترین بخش در کد بالا، متد postMessage() است؛ که از آن برای ارسال یک پیغام به صفحه ی 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 ایجاد می شود، به شنیدن پیغام ها(حتی پس از اینکه اسکریپت اکسترنال پایان یابد) ادامه می دهد تا اینکه به کار آن، خاتمه(terminate) دهیم. برای اینکه به یک web worker خاتمه دهیم و منابع مرورگر یا رایانه را آزاد کنیم، از متد terminate() استفاده می کنیم:

w.terminate();

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

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

w = undefined;

 

یک مثال کامل از Web Worker

ما قبلاً کدهای Worker را در فایل js. مشاهده کردیم. در مثال زیر، این کد برای این صفحه ی HTML قرار دارد:

مثال شماره 2

 <!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 Workers و DOM

چونکه web workers در فایل های اکسترنال قرار دارند، به آبجکت های جاوا اسکریپت زیر دسترسی ندارند:

  1. آبجکت window
  2. آبجکت document
  3. آبجکت parent

 

  • بازدید: 170

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال