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

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

ركّز جزء كبير من محتوى هذه الدورة التدريبية حتى الآن على مفاهيم مثل الاعتبارات العامة لأداء 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، ولديهم إمكانية وصول محدودة إلى واجهات برمجة التطبيقات التي يوفّرها. يخضع عمال الويب للقيود التالية:

• لا يمكن لموظفي الويب الوصول مباشرةً إلى DOM.
• يمكن لموظفي الويب التواصل مع سياق window من خلال مسار للمراسلة، ما يعني أنّ عامل الويب يمكنه بشكل غير مباشر الوصول إلى نموذج العناصر في المستند (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!");
});

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

// 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);
});

ملاحظة: بالنسبة إلى المهام الأساسية، قد يكون من الملائم استخدام مسار المراسلة لدى العامل على الويب مباشرةً. مع ذلك، إذا كنت تبحث عن طريقة لتبسيط هذه العملية عندما تصبح الأمور أكثر تعقيدًا، قد يكون استخدام التجريد مثل Comlink مفيدًا جدًا.

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

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

ما هي سلسلة التعليمات التي يستخدمها عامل الويب؟

سلسلة التعليمات الرئيسية

يُرجى إعادة المحاولة.

سلسلة المحادثات الخاصة بها (تُعرف أيضًا باسم سلسلة محادثات مشغّل الويب)

إجابة صحيحة

سلسلة محادثات وحدة معالجة الرسومات

يُرجى إعادة المحاولة.

ما الذي يمكن للعامل على الويب الوصول إليه؟

أساسيات JavaScript، مثل الصفائف والكائنات.

إجابة صحيحة

مجموعة فرعية صارمة من واجهات برمجة التطبيقات المتوفرة في سياق window، بما في ذلك fetch.

إجابة صحيحة

تمثّل هذه السمة سياق window، ولكن بشكل غير مباشر فقط.

إجابة صحيحة

كيف يمكن للعاملين على الويب الوصول إلى سياق "النافذة"؟

مباشرةً، من خلال الإشارة إلى أعضاء العنصر window

يُرجى إعادة المحاولة.

لا يمكن لعامل الويب الوصول إلى window بأي وسيلة.

يُرجى إعادة المحاولة.

من خلال مسار مراسلة يتم تسهيله من خلال طريقة postMessage في سياق عاملي الويب (self)

إجابة صحيحة

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

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