HTML5 Web Workers چیست ؟ چه کاربردی در html دارد؟

آموزش APIs درس چهارم

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

HTML5 Web Workers چیست؟

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

جاوا اسکریپت html را از اینجا ببینید

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

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

API	کروم	اینترنت اکسپلورر	فایرفاکس	سافاری	آپرا
Web Workers	4.0	10.0	3.5	4.0	11.5

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

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

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

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

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

[php]
var i = 0;

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

timedCount();
[/php]

بخش مهم از کد بالا روش postMessage () است که برای ارسال یک پیام به صفحه HTML استفاده می شود.
نکته: به طور معمول Web Worker برای چنین اسکریپتهای ساده مورد استفاده قرار نمیگیرند، اما بیشتر برای وظایف فشرده CPU. مورد استفاده قرار می گیرند.

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

حالا که ما فایل Web Worker را داریم، باید آن را از یک صفحه HTML فراخوانی کنیم.
خطوط زیر بررسی می کند که آیا Worker در حال حاضر وجود دارد یا نه – یک شی جدید Web Worker ایجاد می کند و کد را در “demo_workers.js” اجرا می کند:

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

سپس ما می توانیم پیام ها را از Web Worker ارسال و دریافت کنیم.
یک “onmessage” event listener را به Web Worker اضافه کنید.

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

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

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

هنگامی که یک شیء Web Worker ایجاد می شود، همچنان به گوش دادن به پیام ها (حتی پس از پایان اسکریپت خارجی) ادامه می دهد تا زمانی که پایان یابد.
برای خاتمه Web Worker و منابع مرورگر / رایانه رایگان، از روش terminate () استفاده کنید:

[php]
w.terminate();
[/php]

استفاده مجدد از HTML5 Web Workers

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

[php]
w = undefined;
[/php]

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

ما قبلا کد Worker را در فایل .js دیده ایم. در ادامه کد برای صفحه HTML آمده است:

مثال :

[php]
<!DOCTYPE html>
<html>
<body>

Count numbers: <output id="result"></output>

<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Avar%20w%3B%0A%0Afunction%20startWorker()%20%7B%0A%20%20%20%20if(typeof(Worker)%20!%3D%3D%20%22undefined%22)%20%7B%0A%20%20%20%20%20%20%20%20if(typeof(w)%20%3D%3D%20%22undefined%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20w%20%3D%20new%20Worker(%22demo_workers.js%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20w.onmessage%20%3D%20function(event)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(%22result%22).innerHTML%20%3D%20event.data%3B%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20document.getElementById(%22result%22).innerHTML%20%3D%20%22Sorry!%20No%20Web%20Worker%20support.%22%3B%0A%20%20%20%20%7D%0A%7D%0A%0Afunction%20stopWorker()%20%7B%0A%20%20%20%20w.terminate()%3B%0A%20%20%20%20w%20%3D%20undefined%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

</body>
</html>
[/php]