Worker Web HTML

Worker Web هو JavaScript يعمل في الخلفية ولا يؤثر على أداء الصفحة.

ما هو Worker Web؟

عند تنفيذ سكربت في صفحة HTML، تصبح الصفحة غير مستجيبة حتى اكتمال سكربت.

Worker Web هو JavaScript يعمل في الخلفية، مستقل عن باقي السكربتات، ولا يؤثر على أداء الصفحة. يمكنك الاستمرار في القيام بأي شيء تريده: النقر، اختيار النص، وما إلى ذلك، بينما يعمل Worker Web في الخلفية.

دعم المتصفحات

الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم Worker Web بشكل كامل.

API
Worker Web 4.0 10.0 3.5 4.0 11.5

مثال على Worker Web HTML

في المثال التالي يتم إنشاء worker web بسيط للعدد في الخلفية:

عدد:

جرب بنفسك

فحص دعم Worker Web

قبل إنشاء worker web، قم بفحص ما إذا كان متصفح المستخدم يدعمه أم لا:

if (typeof(Worker) !== "undefined") {
    // نعم! يدعم Worker Web!
    // بعض الأكواد.....
}
    // عذراً! غير مدعوم Worker Web!
}

إنشاء ملف Worker Web

الآن، دعونا ننشئ 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 العالية وليس للسكربت البسيط.

إنشاء object Web Worker

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

يقوم الكود التالي بفحص وجود worker، إذا لم يكن موجودًا، - سيقوم بإنشاء object جديد من 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 Worker).";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

جرب بنفسك

Web Worker و DOM

بما أن العاملين على الشبكة (web worker) موجودون في ملفات خارجية، فإنهم لا يستطيعون الوصول إلى العناصر التالية من جافا سكريبت:

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