طراحی وب

HTML5 Web Workers

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

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

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

HTML5 Web Workers چیست؟

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

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

HTML5 Web Workers
HTML5 Web Workers

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

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

API کروم اینترنت اکسپلورر فایرفاکس سافاری آپرا
Web Workers۴.۰۱۰.۰۳.۵۴.۰۱۱.۵

 

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

 

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

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 () است که برای ارسال یک پیام به صفحه 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” event listener  را به Web Worker اضافه کنید.

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

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

 

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

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

 w.terminate();

 

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

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

 w = undefined;

 

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

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

مثال :

 <!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="&lt;script&gt;" title="&lt;script&gt;" />

</body>
</html> 

Web Workers  و DOM

از آنجا که Web Workers  در فایل های خارجی هستند، آنها دسترسی به اشیاء جاوا اسکریپت زیر را ندارند:
•           The window object

  • The document object

•           The parent object

برچسب ها

1 دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره رایگان کسب و کار اینترنتی

10 جلسه به همراه فایل صوتی و ویدیویی
همین حالا شروع کنید
تا امروز بیش از 4000 نفر در این دوره شرکت کرده‌اند
بستن پیام
هفته‌نامه بهترین ایده

به جمع 30,000 مشترک ما بپیوندید!

اشتراک رایگان
همین حالا یک ویدیو آموزشی دریافت کنید
بستن