A web worker هو جافا سكريبت قيد التشغيل في الخلفية، دون التأثير على أداء الصفحة.
ما هو Web Worker ؟
عند تنفيذ البرامج النصية في صفحة HTML، الصفحة تصبح لا تستجيب حتى يتم الانتهاء من السيناريو.
عامل على شبكة الإنترنت، كما تم تعريفها من قبل اتحاد شبكة الويب العالمية (W3C) والشبكة التشعبي التطبيق الفريق العامل التكنولوجيا (WHATWG)، هو السيناريو جافا سكريبت تنفيذها من صفحة HTML التي يتم تشغيلها في الخلفية، بشكل مستقل عن البرامج النصية واجهة المستخدم الأخرى التي ويمكن أيضا تم تنفيذها من صفحة HTML نفسها. العمال على شبكة الإنترنت غالبا ما تكون قادرة على الاستفادة من وحدات المعالجة المركزية متعددة النوى بشكل أكثر فعالية.
نظرة عامة
كما يتصورها WHATWG والعمال على شبكة الإنترنت هم نسبيا الثقيل الوزن. ومن المتوقع أن تكون طويلة الأجل هم، لديها ارتفاع تكلفة أداء البدء، وتكلفة الذاكرة عالية لكل مثيل.
ليس المقصود العمال ويب أو المتوقع لاستخدامها في أعداد كبيرة لأنها يمكن أن خنزير نظام الموارد.
العمال على شبكة الإنترنت يسمح بتنفيذ متزامن من المواضيع متصفح واحد أو أكثر من المواضيع جافا سكريبت قيد التشغيل في الخلفية. سيقوم المتصفح الذي يتبع مؤشر ترابط واحد من تنفيذ تضطر إلى الانتظار في برامج جافا سكريبت لإنهاء تنفيذ قبل المتابعة، وهذا قد يستغرق وقتا كبيرا والتي قد ترغب مبرمج للاختباء من المستخدم.
انها تسمح للمتصفح لمواصلة عملية عادية أثناء تشغيل البرنامج النصي في الخلفية. مواصفات عامل على شبكة الإنترنت هي مواصفات منفصلة من مواصفات HTML5، ويمكن استخدامها مع HTML5.
هناك نوعان من العمال على شبكة الإنترنت: العمال مخصصة ومشتركة.
عندما تشغيل العمال على شبكة الإنترنت في الخلفية، وليس لديهم إمكانية الوصول المباشر إلى DOM لكن التواصل مع الوثيقة التي يمر الرسالة. وهذا يسمح لتنفيذ متعددة الخيوط برامج جافا سكريبت.
دعم المتصفح
الأرقام في الجدول تحدد إصدار المستعرض الأولى التي تدعم بالكامل Web Workers .
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Web Workers مثال
المثال التالي إلى إنشاء بسيط web worker التي تعتمد الأرقام في الخلفية:
تحقق Web Worker دعم
قبل إنشاء web worker ، والتحقق ما إذا كان المستعرض الخاص بالمستخدم يدعم ذلك:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
إنشاء Web Worker ملف
الآن، دعونا نصنع web worker في جافا سكريبت خارجي.
هنا، ونحن خلق السيناريو الذي تعول. يتم تخزين البرنامج النصي في "/html/demo_workers.js" ملف:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
الجزء المهم من التعليمات البرمجية أعلاه هو postMessage() الطريقة - الذي يستخدم لمرحلة ما بعد الرسالة مرة أخرى إلى صفحة HTML.
Note: عادة web workers لا تستخدم لمثل هذه الكتابات بسيطة، ولكن لمزيد من المهام وحدة المعالجة المركزية مكثفة.
إنشاء Web Worker كائن
الآن أن لدينا web worker الملف، نحتاج أن نسميها من صفحة HTML.
الأسطر التالية يتحقق إذا كان web worker موجود بالفعل، إن لم يكن - أنه يخلق الجديد web worker الكائن ويدير التعليمات البرمجية في "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/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 يتم إنشاء الكائن، فإنه سيتم مواصلة الاستماع للرسائل (even after the external script is finished) حتى يتم إنهاء ذلك.
لإنهاء web worker ، ومتصفح تحرير الموارد / الكمبيوتر، استخدم terminate() الأسلوب:
w.terminate();
إعادة استخدام Web Worker
إذا قمت بتعيين web 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>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/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 هم في الملفات الخارجية، ليس لديهم إمكانية الوصول إلى كائنات جافا سكريبت التالية:
- الكائن الإطار
- كائن المستند
- الكائن الأصل