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

حالا، بیایید web worker خود را در یک فایل JavaScript خارجی ایجاد کنیم.

در اینجا، ما اسکریپت شمارش را ایجاد می‌کنیم. این اسکریپت در فایل "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" به 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

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

  • عنصر window
  • عنصر document
  • عنصر parent