نظرة عامة على عمال الويب

ركز الكثير من المحتوى في هذه الدورة حتى الآن على مفاهيم مثل الاعتبارات العامة لأداء HTML، وتلميحات الموارد، وتحسين لتحسين وقت تحميل الصفحة الأولية وسرعة الاستجابة للمستخدم مدخلات البيانات، بالإضافة إلى طريقة التحميل الكسول لموارد محددة.

ومع ذلك، هناك جانب واحد من الأداء فيما يتعلق بلغة JavaScript لم يتم حتى الآن في هذه الدورة، وهو دور موظفي الويب في تحسين سرعة الاستجابة للإدخال، والتي تغطيها هذه الوحدة والتالية.

غالبًا ما يتم وصف لغة JavaScript بأنّها لغة تتضمّن سلسلة محادثات. عمليًا، هذا يشير إلى سلسلة المحادثات الرئيسية، وهي سلسلة المحادثات الفردية التي يتضمّنها المتصفّح معظم العمل الذي تراه في المتصفح. يتضمن هذا العمل المهام المتضمنة في أشياء مثل البرمجة النصية وبعض أنواع أعمال العرض وتحليل HTML وCSS، وأنواع أخرى من العمل الموجَّه للمستخدم الذي يقود تجربة المستخدم. في الحقيقة، المتصفّحات تستخدم سلاسل محادثات أخرى لتنفيذ مهام لا يجب تنفيذها أنت، أيّ مطوِّر البرامج. يمكن الوصول إليها مباشرةً، مثلاً سلاسل وحدات معالجة الرسومات.

بالنسبة إلى JavaScript، لا يمكنك عادةً إلا العمل على سلسلة التعليمات الرئيسية، ولكن بشكل تلقائي فقط من التسجيل والاستخدام سلاسل محادثات إضافية في JavaScript. وهي الميزة التي تسمح بتعدد سلاسل المحادثات في تُعرف لغة JavaScript باسم Web Workers API.

يكون عاملو الويب مفيدًا عندما يكون لديك عمل مكلف من الناحية الحاسوبية في سلسلة التعليمات الرئيسية بدون التسبب في مهام طويلة تجعل الصفحة لا يستجيب. يمكن أن تؤثر مثل هذه المهام بالتأكيد على تفاعل موقعك مدى استجابة الصفحة لتفاعلات المستخدم (INP)، ما يتيح لك معرفة ما إذا كان لديك عمل يمكن إنجازه تتم خارج سلسلة التعليمات الرئيسية بالكامل. القيام بذلك يمكن أن يساعد في خلق المزيد من المجال مهام أخرى في سلسلة التعليمات الرئيسية كي تصبح تفاعلات المستخدمين أسرع.

تشمل هذه الوحدة والعرض التوضيحي اللاحق الذي يوضح حالة استخدام ملموسة خدمات الويب العمال. يوضح العرض التوضيحي نفسه كيف يمكنك استخدام عامل ويب لتنفيذ العمل قراءة البيانات الوصفية للصور من ملف JPEG خارج سلسلة التعليمات الرئيسية — وكيف إعادة هذه البيانات الوصفية إلى سلسلة التعليمات الرئيسية ليراها المستخدم.

كيفية إطلاق عامل الويب

يتم تسجيل عامل على الويب من خلال إنشاء مثيل لفئة Worker. عند إجراء لذا، فإنك تحدد مكان رمز عامل الويب، الذي يحمّله المتصفح ومن ثم تنشئ سلسلة محادثات جديدة لها. غالبًا ما يُطلق على سلسلة التعليمات الناتجة سلسلة رسائل عامل.

const myWebWorker = new Worker('/js/my-web-worker.js');

وفي ملف JavaScript الخاص بالعامل، وهو my-web-worker.js في هذه الحالة، يمكنك: وكتابة التعليمات البرمجية التي يتم تشغيلها بعد ذلك في مؤشر ترابط عامل منفصل.

قيود العامل على الويب

على عكس لغة JavaScript التي يتم تشغيلها على سلسلة التعليمات الرئيسية، لا يستطيع العاملون على الويب الوصول مباشرةً على سياق window ولديهم إمكانية وصول محدودة إلى واجهات برمجة التطبيقات التي توفرها. محتوى مخصّص للويب يخضع العمال للقيود التالية:

• لا يمكن للعاملين على الويب الوصول مباشرةً إلى نموذج العناصر في المستند.
• يمكن للعاملين على الويب التواصل مع سياق window من خلال المراسلة. DOM، أي أنّه يمكن لعامل الويب الوصول بشكل غير مباشر إلى نموذج العناصر في المستند (DOM).
• نطاق مشغِّل الويب هو self بدلاً من window.
• يستطيع نطاق مشغّل الويب الوصول إلى أساسيات JavaScript التركيبات وكذلك واجهات برمجة التطبيقات مثل fetch وعدد كبير إلى حدّ ما من واجهات برمجة تطبيقات أخرى.

طريقة تواصل العاملين على الويب مع window

من الممكن لعامل الويب التواصل مع window لسلسلة المحادثات الرئيسية. والسياق من خلال مسار الرسائل. يتيح لك هذا المسار نقل البيانات إلى من سلسلة التعليمات الرئيسية وعامل تشغيل الويب. لإرسال البيانات من عامل ويب إلى سلسلة التعليمات الرئيسية، لنفترض أنك أعددت حدث message على سياق العامل على الويب (self).

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

يمكنك بعد ذلك إضافة السمة window في سياق سلسلة المحادثات الرئيسية إلى نص برمجي رسالة من سلسلة محادثات عاملي الويب باستخدام حدث message آخر:

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

يعتبر مسار المراسلة لدى عامل الويب بمثابة مخرج من أنواع الهروب من الويب سياق العمال. باستخدامه، يمكنك إرسال البيانات إلى window من العامل على الويب. التي يمكنك استخدامها لتحديث DOM، أو تنفيذ أي عمل آخر يجب إنجازه في سلسلة التعليمات الرئيسية.

اختبِر معلوماتك

التالي: حالة استخدام عامل ويب ملموس

في الوحدة التالية، سيتم شرح حالة استخدام عامل تشغيل الويب الملموس إظهاره. في تلك الوحدة، يتم استخدام عامل الويب لجلب ملف JPEG من وقراءة بيانات Exif الوصفية الخاصة به في عامل على الويب. ثم يتم إرسال تلك البيانات مرة أخرى لسلسلة المحادثات الرئيسية لعرضها للمستخدم.