HTML Web Workers API
عامل الويب هو جافا سكريبت يعمل في الخلفية ، دون التأثير على أداء الصفحة.
ما هو عامل الويب؟
عند تنفيذ البرامج النصية في صفحة HTML ، تصبح الصفحة غير مستجيبة حتى ينتهي البرنامج النصي.
عامل الويب هو جافا سكريبت يتم تشغيله في الخلفية ، بشكل مستقل عن البرامج النصية الأخرى ، دون التأثير على أداء الصفحة. يمكنك الاستمرار في فعل ما تريد: النقر واختيار الأشياء وما إلى ذلك ، بينما يعمل عامل الويب في الخلفية.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المستعرض الأول الذي يدعم Web Workers بشكل كامل.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
مثال على عمال ويب HTML
ينشئ المثال أدناه عامل ويب بسيطًا يقوم بحساب الأرقام في الخلفية:
مثال
تحقق من دعم Web Worker
قبل إنشاء عامل ويب ، تحقق مما إذا كان متصفح المستخدم يدعمه:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
قم بإنشاء ملف Web Worker
الآن ، لنقم بإنشاء عامل الويب الخاص بنا في JavaScript خارجي.
هنا ، نقوم بإنشاء برنامج نصي مهم. يتم تخزين النص البرمجي في ملف "demo_workers.js":
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
الجزء المهم من الكود أعلاه هو postMessage()الطريقة - التي تُستخدم لإرسال رسالة مرة أخرى إلى صفحة HTML.
ملاحظة: عادة لا يتم استخدام العاملين على الويب لمثل هذه البرامج النصية البسيطة ، ولكن لمزيد من المهام المكثفة لوحدة المعالجة المركزية.
قم بإنشاء كائن Web Worker
الآن بعد أن أصبح لدينا ملف Web worker ، نحتاج إلى تسميته من صفحة HTML.
تتحقق الأسطر التالية مما إذا كان العامل موجودًا بالفعل ، إذا لم يكن كذلك - يقوم بإنشاء كائن عامل ويب جديد وتشغيل الكود في "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
ثم يمكننا إرسال واستقبال الرسائل من عامل الويب.
أضف مستمع حدث "onmessage" إلى عامل الويب.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
عندما ينشر عامل الويب رسالة ، يتم تنفيذ الكود داخل مستمع الحدث. يتم تخزين البيانات من عامل الويب في event.data.
إنهاء عامل الويب
عندما يتم إنشاء كائن عامل الويب ، فإنه سيستمر في الاستماع للرسائل (حتى بعد انتهاء النص الخارجي) حتى يتم إنهاؤه.
لإنهاء عامل الويب ، والحصول على موارد متصفح / كمبيوتر مجانية ، استخدم
terminate()الطريقة:
w.terminate();
أعد استخدام Web Worker
إذا قمت بتعيين المتغير العامل على غير محدد ، بعد أن تم إنهاؤه ، يمكنك إعادة استخدام الكود:
w = undefined;
مثال على كود عامل الويب الكامل
لقد رأينا بالفعل رمز العامل في ملف .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>
عمال الويب و DOM
نظرًا لأن العاملين على الويب في ملفات خارجية ، فلا يمكنهم الوصول إلى كائنات JavaScript التالية:
- كائن النافذة
- كائن المستند
- الكائن الأصل