Web Workers HTML

Web worker یک JavaScript در پس‌زمینه است که تأثیری بر عملکرد صفحه ندارد.

Web Worker چیست؟

وقتی که یک اسکریپت در صفحه HTML اجرا می‌شود، صفحه غیرقابل پاسخ است تا زمانی که اسکریپت به پایان برسد.

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

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

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

API
Web Worker 4.0 10.0 3.5 4.0 11.5

مثال Web Worker HTML

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

شمارش:

به طور مستقیم امتحان کنید

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

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

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

ایجاد فایل Web Worker

حالا، بیایید در یک فایل JavaScript خارجی 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 وجود دارد یا خیر، اگر وجود ندارد، - یک وب‌کارگر جدید ایجاد می‌کند و کد در فایل "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 را به undefined تنظیم کنید، می‌توانید این کد را پس از اتمام آن دوباره استفاده کنید:

w = undefined;

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

ما کد Worker در فایل .js را دیده‌ایم. در اینجا کد صفحه HTML آورده شده است:

مثال

<!DOCTYPE html>
<html>
<body>
<p>شمارش اعداد: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<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;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

به طور مستقیم امتحان کنید

Web Worker و DOM

به دلیل اینکه Web Worker در یک فایل خارجی قرار دارد، نمی‌توان به این JavaScript Object‌ها دسترسی داشت:

  • شیء window
  • شیء document
  • شیء parent