HTML Web Workers

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

مثال على Worker Web 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 أكثر وليس للسكربت البسيط.

إنشاء objekt Web Worker

الآن لدينا ملف web worker، نحتاج إلى استدعاءه من صفحة الـ HTML.

يختبر السطر التالي وجود worker، إذا لم يكن موجودًا، - سيقوم بإنشاء objekt جديد من 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 = غير محدد;

كود مثال كامل لـ Web Worker

لقد رأينا بالفعل كود Worker في ملف .js. إليك كود صفحة الـ HTML:

مثال

<!DOCTYPE html>
<html>
<body>
<p>عدد العد: <output id="result"></output></p>
<button onclick="startWorker()">بدء العامل</button> 
<button onclick="stopWorker()">وقف العامل</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 = "آسف! ليس هناك دعم للعمال الافتراضية (Web Workers).";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

تجربة بنفسك

عمال الافتراضية (Web Workers) و DOM

بما أن العمال الافتراضية (web workers) تقع في ملفات خارجية، فإنها لا يمكنها الوصول إلى العناصر التالية من JavaScript:

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