Web Workers در HTML
| Main Page Tutorial | |
|---|---|
 | |
| موارد آموزشی | |
| فرم‌های HTML | |
| گرافیک در HTML | |
| رسانه در HTML | |
| APIها در HTML | |
| ۱ | موقعیت جغرافیایی |
| ۲ | کشیدن/رهاکردن |
| ۳ | ذخیره‌سازی وب |
| ۴ | Workerهای وب |
| ۵ | SSE |
| مثال‌ها | |
| مرجع HTML | |
Web worker یک جاوا اسکریپت در حال اجرا در پس زمینه است بدون اینکه بر عملکرد صفحه تأثیر گذار باشد.[۱]
Web Worker چیست؟
با اجرای اسکریپت‌ها در صفحه HTML، صفحه تا زمان اتمام اسکریپت غیرواکنش‌گرا (به انگلیسی: Unresponsive) می‌شود.
Web Worker یک جاوا اسکریپت است که در پس زمینه و مستقل از اسکریپت‌های دیگر اجرا می‌شود بدون اینکه بر عملکرد صفحه تأثیرگذار باشد. در حالی که web worker در پس زمینه اجرا می‌شود، می‌توانید هرکاری را که می‌خواهید ادامه دهید: کلیک کردن، انتخاب کردن و غیره.
پشتیبانی مرورگر
اعداد در جدول زیر نشان دهنده اولین نسخه مرورگرها هستند که از web workerها بطور کامل پشتیبانی می‌کنند.
| API |  |
 |
 |
 |
|
| Web Workers | ۴٫۰ | ۱۰٫۰ | ۳٫۵ | ۴٫۰ | ۱۱٫۵ |
مثالی از Web Workerها در HTML
مثال زیر یک web worker ساده را ایجاد می‌کند که اعداد را در پس‌زمینه شمارش می‌کند:
مثال
40px ساخت نمونه مثال این بخش در دست اقدام است.
بررسی پشتیبانی 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ها در فایل‌های خارجی هستند، به اشیاء جاوا اسکریپتی زیر دسترسی ندارند:
- شیء ویندوز
- شیء سند
- شیء والد
منابع آموزشی