كيفية تحسين أداء موقعك الإلكتروني من خلال مهام الويب ومهام الخدمة، وحالات استخدام مهام الويب بدلاً من مهام الخدمة
توضِّح هذه النظرة العامة كيفية تحسين أداء موقعك الإلكتروني من خلال مهام Web Worker وService Worker، وحالات استخدام مهام Web Worker بدلاً من مهام Service Worker. اطّلِع على باقي هذه السلسلة للاطّلاع على أنماط محدّدة للتواصل بين النوافذ وخدمات Worker.
كيف يمكن للموظفين تحسين موقعك الإلكتروني؟
يستخدم المتصفّح سلسلة مهام واحدة (سلسلة المهام الرئيسية) لتشغيل كل محتوى JavaScript في صفحة ويب، بالإضافة إلى تنفيذ مهام مثل عرض الصفحة وجمع الملفات غير الضرورية. يمكن أن يؤدي تشغيل رمز JavaScript زائد إلى حظر سلسلة المحادثات الرئيسية، ما يؤخّر المتصفّح عن تنفيذ هذه المهام ويؤدي إلى تقديم تجربة سيئة للمستخدم.
في تطوير تطبيقات iOS/Android، من الشائع تفريغ العمليات إلى سلاسل مهام إضافية لضمان بقاء سلسلة المهام الرئيسية للتطبيق متاحة للردّ على أحداث المستخدمين. في الواقع، في أحدث إصدارات Android، يؤدي حظر سلسلة المهام الرئيسية لفترة طويلة جدًا إلى تعطُّل التطبيق.
على الويب، تم تصميم JavaScript استنادًا إلى مفهوم سلسلة محادثات واحدة، ولا تتوفّر فيها الإمكانات اللازمة لتنفيذ نموذج تعدد سلاسل المحادثات مثل النموذج المتوفّر في التطبيقات، مثل الذاكرة المشتركة.
على الرغم من هذه القيود، يمكن تحقيق نمط مشابه على الويب باستخدام مثيل معالجة لتنفيذ النصوص البرمجية في سلاسل معالجة في الخلفية، ما يتيح له تنفيذ المهام بدون التدخل في سلسلة المعالجة الرئيسية. "العمال" هم نطاق JavaScript كامل يتم تشغيله في سلسلة محادثات منفصلة، بدون أي ذاكرة مشترَكة.
ستتعرّف في هذا المنشور على نوعَين مختلفَين من وحدات العمل (وحدات عمل الويب ووحدات عمل الخدمة) وتشابهاتهما واختلافاتهما وأنماط استخدامهما الأكثر شيوعًا في المواقع الإلكترونية المخصّصة للنشر.
عمال الويب ومشغِّلو الخدمات
أوجه التشابه
مشغِّلات الويب ومشغِّلات الخدمات هما نوعان من المشغِّلات المتاحة للمواقع الإلكترونية. تتشارك هذه الصفحات بعض العناصر:
- ويتم تشغيل كليهما في سلسلة مهام ثانوية، ما يسمح بتنفيذ رمز JavaScript بدون حظر السلسلة الرئيسية وواجهة المستخدم.
- ولا يمكنها الوصول إلى كائنَي
WindowوDocument، لذا لا يمكنها التفاعل مع DOM مباشرةً، كما أنّ إمكانية وصولها إلى واجهات برمجة تطبيقات المتصفّح محدودة.
أوجه الاختلاف
قد يظنّ البعض أنّ معظم الإجراءات التي يمكن تفويضها إلى عامل ويب يمكن تنفيذها في عامل خدمة والعكس صحيح، ولكن هناك اختلافات مهمة بينهما:
- على عكس مهام الويب، تسمح لك مهام الخدمة برصد طلبات الشبكة (من خلال الحدث
fetch) والاستماع إلى أحداث Push API في الخلفية (من خلال الحدثpush). - يمكن أن تنشئ الصفحة عدة مشغّلات ويب، ولكن يتحكّم مشغّل خدمات واحد في جميع علامات التبويب النشطة ضمن النطاق الذي تم تسجيله فيه.
- ترتبط مدة عمل Web Worker ارتباطًا وثيقًا بعلامة التبويب التي ينتمي إليها، في حين تكون دورة حياة مشغّل الخدمة مستقلة عنها. لهذا السبب، سيؤدي إغلاق علامة التبويب التي يعمل فيها عامل الويب إلى إنهاء عمله، في حين يمكن لمشغّل الخدمة مواصلة العمل في الخلفية، حتى إذا لم يكن الموقع الإلكتروني يحتوي على أي علامات تبويب نشطة مفتوحة.
حالات الاستخدام
تشير الاختلافات بين نوعَي العمال إلى الحالات التي قد يريد فيها المرء استخدام أحدهما أو الآخر:
غالبًا ما تكون حالات استخدام Web Workers مرتبطة بتفريغ العمل (مثل عمليات المعالجة الثقيلة) إلى سلسلت معالجة ثانوية، لتجنُّب حظر واجهة المستخدم.
- مثال: أراد الفريق الذي أنشأ لعبة الفيديو PROXX ترك مناقشة العميل الأساسية خالية قدر الإمكان من أجل الاهتمام بإدخالات المستخدمين والرسوم المتحركة. لتحقيق ذلك، استخدَم الفريق خيوط المعالجة في الويب لتشغيل منطق اللعبة وصيانة الحالة في سلسلة مهام منفصلة.
ترتبط مهام مهام الخدمة بشكل عام بالعمل كوكيل للشبكة ومعالجة المهام التي تعمل في الخلفية وأشياء مثل التخزين المؤقت والتشغيل بلا إنترنت.
مثال: في تطبيق بودكاست متوافق مع الأجهزة الجوّالة (PWA)، قد تريد السماح للمستخدمين بتنزيل الحلقات الكاملة للاستماع إليها بلا إنترنت. يمكن استخدام عامل الخدمة، وعلى وجه الخصوص، Background Fetch API لهذا الغرض. بهذه الطريقة، إذا أغلق المستخدم علامة التبويب أثناء تنزيل الحلقة، لن تتم مقاطعة المهمة.
الأدوات والمكتبات
يمكن تنفيذ تواصل النافذة مع العامل باستخدام واجهات برمجة تطبيقات مختلفة من المستوى الأدنى. لحسن الحظ، تتوفّر مكتبات تلخّص هذه العملية، وتهتمّ بحالات الاستخدام الأكثر شيوعًا. في هذا القسم، سنتناول اثنين منهما اللذَين يعتنيان بعمال النوافذ والويب وعمال الخدمات على التوالي: Comlink و Workbox.
Comlink
Comlink هي مكتبة صغيرة (1.6 كيلو بايت) RPC تهتم بالعديد من التفاصيل الأساسية عند إنشاء المواقع الإلكترونية التي تستخدِم Web Workers. وقد تم استخدامه في مواقع إلكترونية، مثل PROXX وSquoosh. يمكنك الاطّلاع هنا على ملخص للدوافع التي أدّت إلى إجراء هذا التغيير وعينات من الرموز البرمجية.
Workbox
Workbox هي مكتبة رائجة لإنشاء مواقع إلكترونية
تستخدم مهام الخدمة. وهي تُجمِّع مجموعة من أفضل الممارسات حول أمور مثل التخزين المؤقت والتشغيل بلا إنترنت،
والمزامنة في الخلفية، وما إلى ذلك. توفّر وحدة workbox-window
طريقة ملائمة لتبادل الرسائل بين الخدمة العاملة والصفحة.
الخطوات التالية
تركّز بقية هذه السلسلة على أنماط تواصل نوافذ الخدمة وخدمات العمل:
- دليل التخزين المؤقت الإلزامي: استدعاء مشغّل خدمة من الصفحة لتخزين الموارد مؤقتًا مسبقًا (على سبيل المثال، في سيناريوهات التحميل المُسبَق).
- نشر التعديلات: استدعاء الصفحة من الخدمة العاملة لإعلام العميل بالتعديلات المهمة (مثل توفّر إصدار جديد من الموقع الإلكتروني)
- التواصل في الاتجاهين: تفويض مهمة إلى عامل خدمة (مثل تنزيل ملف كبير) وإبقاء الصفحة على اطّلاع بالتقدّم
للاطّلاع على أنماط تواصل النوافذ مع مهام الويب، يمكنك الاطّلاع على المقالة استخدام مهام الويب لتشغيل JavaScript خارج سلسلة المهام الرئيسية للمتصفح.