API عامل الويب

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

ما هو Web Worker؟

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

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

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم Web Workers بالكامل:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
كانون الثاني/يناير 2010 أيلول/سبتمبر 2012 حزيران/يونيو 2009 حزيران/يونيو 2009 حزيران/يونيو 2011

مثال العامل على الويب

في هذا المثال، يتم إنشاء عامل ويب بسيط، يحدد الرقم في الخلفية:

مثال

عدد:

جرب بنفسك

تحقق من متصفح العامل على الويب

قبل إنشاء عامل الويب، يرجى التحقق من أن متصفح المستخدم يدعمه:

إذا (typeof(Worker) !== "undefined") {
  // نعم! يدعم العامل على الويب!
  // بعض الأكواد.....
} آخره {
  // عفوا! لا يدعم العامل على الويب..
}

إنشاء ملف العامل على الويب

الآن، دعونا ننشئ Web Worker الخاص بنا في الجافاسكربت الخارجي.

في هذا المكان، قمنا بإنشاء سكربت مهم. يتم تخزين هذا السكربت في ملف "demo_workers.js":

let i = 0;
function timedCount() {
  i ++;
  postMessage(i);
  setTimeout("timedCount()",500);
}
timedCount();

جزء مهم من الكود السابق هو postMessage() الطريقة - لإنشاء رسالة وإرسالها إلى صفحة الـ HTML.

ملاحظة:عادةً لا يتم استخدام web worker في هذا النوع من السكربت البسيط، بل في المهام الكثيفة من حيث استخدام المعالج.

إنشاء كائن Web Worker

الآن لدينا ملف web worker، نحتاج إلى طلب التشغيل منه من صفحة الـ HTML.

يحقق هذا السطر من الكود ما إذا كان worker موجودًا أم لا، إذا لم يكن موجودًا، سيقوم بإنشاء كائن 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 إلى undefined، فيمكنك استخدام الكود التالي بعد انتهاء تشغيله:

w = undefined;

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

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

مثال

<!DOCTYPE html>
<html>
<body>
<p>عد الأرقام: <output id="result"></output></p>
<button onclick="startWorker()">البداية</button>
<button onclick="stopWorker()">توقف العامل</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

جرب بنفسك

Web Worker و DOM

بسبب أن Web Worker يوجد في ملف خارجي، لذلك لا يمكنه الوصول إلى العناصر التالية من JavaScript Objects:

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