Web Workers در HTML

از ویکی‌کد
(تغییرمسیر از Web workers در اچ تی ام ال)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
۱موقعیت جغرافیایی
۲کشیدن/رهاکردن
۳ذخیره‌سازی وب
۴Workerهای وب
۵SSE
مثال‌ها
مرجع HTML

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

Web Worker چیست؟

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

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

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

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

API Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
Web Workers ۴٫۰ ۱۰٫۰ ۳٫۵ ۴٫۰ ۱۱٫۵


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

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

مثال

Time2wait.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 است:

مثال

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <p>Count numbers: <output id="result"></output></p>
 6 <button onclick="startWorker()">Start Worker</button>
 7 <button onclick="stopWorker()">Stop Worker</button>
 8 
 9 <script>
10 var w;
11 
12 function startWorker() {
13   if (typeof(Worker) !== "undefined") {
14     if (typeof(w) == "undefined") {
15       w = new Worker("demo_workers.js");
16     }
17     w.onmessage = function(event) {
18       document.getElementById("result").innerHTML = event.data;
19     };
20   } else {
21     document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
22   }
23 }
24 
25 function stopWorker() {
26   w.terminate();
27   w = undefined;
28 }
29 </script>
30 
31 </body>
32 </html>


مشاهدهٔ نتیجه


Web Worker‌ها و DOM

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

  • شیء ویندوز
  • شیء سند
  • شیء والد


منابع آموزشی