ما هو Web Worker؟
- Web Worker هو عبارة عن برنامج JavaScript يعمل في الخلفية بشكل مستقل عن البرامج النصية الأخرى، دون التأثير على أداء الصفحة.
- يتيح ذلك للمستخدم الاستمرار في التفاعل مع الصفحة (النقر، التحديد، التمرير، إلخ) أثناء تشغيل Web Worker في الخلفية.
- يعالج مشكلة توقف الصفحة عن الاستجابة عند تنفيذ البرامج النصية الطويلة أو المعقدة، حيث يتم فصل هذه المهام عن واجهة المستخدم الرئيسية.
أهمية استخدام Web Workers:
- تحسين تجربة المستخدم من خلال الحفاظ على سلاسة وتفاعلية الصفحة أثناء تنفيذ المهام الثقيلة.
- تسريع أداء تطبيقات الويب من خلال توزيع المهام على خيوط منفصلة.
- تمكين التطبيقات من القيام بعمليات متزامنة في الخلفية، مثل إجراء عمليات حسابية معقدة أو جلب البيانات من الخادم.
التحقق من دعم Web Workers
قبل إنشاء Web Worker، يجب التحقق مما إذا كان متصفح المستخدم يدعمه من خلال الكود التالي:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
إنشاء ملف Web Worker
الآن، سنقوم بإنشاء ملف JavaScript خارجي يحتوي على كود Web Worker. سننشئ نموذجاً بسيطاً يقوم بالعد، وسيتم حفظه في ملف باسم “demo_workers.js”:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
شرح الكود:
- var i = 0;:
- تهيئة متغير
iوجعله يساوي صفراً لبدء عملية العد.
- تهيئة متغير
- function timedCount():
- تعريف تابع يقوم بزيادة قيمة
iوإرسالها إلى الصفحة الرئيسية باستخدامpostMessage. - استخدام
setTimeoutلاستدعاء التابع نفسه مجدداً بعد 500 مللي ثانية، مما يخلق عملية تكرارية للعد.
- تعريف تابع يقوم بزيادة قيمة
- timedCount();:
- استدعاء التابع
timedCountلبدء عملية العد.
- استدعاء التابع
الجزء المهم في الكود هو طريقة postMessage()، والتي تستخدم لإرسال رسالة من Web Worker إلى الصفحة الرئيسية.
ملاحظة هامة: عادةً لا يتم استخدام Web Workers في مهام بسيطة مثل هذه، بل في المهام الأكثر كثافة في استخدام وحدة المعالجة المركزية (CPU) مثل العمليات الحسابية المعقدة أو معالجة البيانات الكبيرة.
إنشاء كائن Web Worker
بعد إنشاء ملف Web Worker، نحتاج الآن إلى استدعائه من صفحة HTML. السطور التالية تتحقق من وجود الكائن بالفعل، وإذا لم يكن موجودًا، تقوم بإنشاء كائن Web Worker جديد وتشغيل الكود الموجود في ملف “demo_workers.js”:
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
بعد ذلك، يمكننا إرسال واستقبال الرسائل من Web Worker. يتم ذلك عن طريق إضافة مستمع حدث “onmessage” إلى كائن Worker:
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
عندما يرسل Web Worker رسالة باستخدام postMessage()، يتم تنفيذ كود مستمع الحدث، وتكون البيانات المرسلة من Web Worker مخزنة في event.data.
إنهاء Web Worker
عندما يتم إنشاء كائن Web Worker، فإنه يستمر في انتظار الرسائل (حتى بعد انتهاء تشغيل البرنامج النصي الخارجي) حتى يتم إنهاءه بشكل صريح.
لإنهاء Web Worker وتحرير الموارد التي يستهلكها في المتصفح/الكمبيوتر، يتم استخدام الطريقة terminate() كالتالي:
w.terminate();
إعادة استخدام Web Worker
يمكن إعادة استخدام كود Web Worker نفسه عن طريق إعادة تعيين المتغير الذي يشير إلى كائن Worker إلى undefined بعد إنهاءه، ثم إنشاء كائن Worker جديد باستخدام نفس الملف:
w = undefined;
كود مثال كامل لـ Web Worker
لقد رأينا سابقاً كود Web Worker في ملف .js. فيما يلي كود صفحة HTML :
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<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;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Web Workers و DOM
نظرًا لأن Web Workers تعمل في ملفات منفصلة، لا يمكنها الوصول إلى كائنات JavaScript التالية التي ترتبط بواجهة المستخدم الرئيسية:
- كائن window: هذا الكائن يمثل نافذة المتصفح ويحتوي على خصائص وطرق مرتبطة بالصفحة الحالية، مثل
locationوalertوsetTimeout. - كائن document: هذا الكائن يمثل محتوى صفحة HTML، بما في ذلك عناصرها وهيكلها، ويستخدم للتعامل مع عناصر الصفحة وتعديلها.
- الكائن parent: هذا الكائن يشير إلى الكائن الأب (parent object) للكائن الحالي، وغالبًا ما يُستخدم للوصول إلى كائنات في نطاق أوسع.
