هل احتجت في أي وقت مضى إلى تشغيل التعليمات البرمجية في المتصفح الذي استغرق وقتًا طويلاً لتشغيل تطبيقك وأصبح غير مستجيب لبعض الوقت؟ مع العاملين على الويب HTML5 ، لن تحتاج إلى تجربة ذلك مرة أخرى.
يسمح لك عمال الويب بفصل التعليمات البرمجية طويلة المدى وتشغيلها بشكل مستقل عن التعليمات البرمجية الأخرى التي تعمل على الصفحة. هذا يحافظ على استجابة واجهة المستخدم الخاصة بك ، حتى أثناء العمليات المعقدة.
من هم عمال الويب؟
تقليديًا ، تعد JavaScript لغة ذات سلسلة مفردة. هذا يعني أنه لا يمكن تشغيل أي شيء آخر أثناء تشغيل جزء واحد من التعليمات البرمجية. على سبيل المثال ، إذا كان لديك رمز يحاول تحريك عنصر DOM ، فإن التعليمات البرمجية التي تحاول تغيير متغير يجب أن تنتظر حتى تنتهي الرسوم المتحركة قبل أن تتمكن من تشغيلها.
عمال الويب عبارة عن ملفات JavaScript يتم تنفيذها في سلسلة منفصلة بدون وصول مباشر إلى DOM.
تتمثل إحدى طرق التفكير في العاملين على الويب في أنهم أجزاء من التعليمات البرمجية تستغرق وقتًا طويلاً للتشغيل ، لذا فإنك تمنحهم للمتصفح لتنفيذها في الخلفية. نظرًا لأن هذا الرمز يعمل الآن في الخلفية ، فإنه لا يؤثر على JavaScript المسؤولة عن صفحة الويب الخاصة بك.
كأثر جانبي ، لم يعد بإمكانه التفاعل مباشرة مع بقية التعليمات البرمجية الخاصة بك ، لذلك لا يمكن للعاملين على الويب الوصول إلى DOM. ومع ذلك ، لا تزال العديد من واجهات برمجة التطبيقات للمتصفح متاحة ، بما في ذلك WebSocket و Fetch APIs.
ومع ذلك ، فإن العاملين على الويب ليسوا معزولين تمامًا عن الموضوع الرئيسي. عندما يحتاج العامل إلى التواصل مع السلسلة الرئيسية ، يمكنه إرسال رسالة ويمكن للموضوع الرئيسي إرسال رسالته الخاصة استجابة لذلك.
لماذا عمال الويب؟
قبل العاملين على الويب ، كانت الطريقة الوحيدة لتشغيل JavaScript التي تتطلب الكثير من الوقت في المتصفح هي إما:
- اقبل أن الصفحة لن تستجيب لبعض الوقت.
- كسر هذا الرمز إلى قطع غير متزامنة.
نظرًا لأن الصفحة غير المستجيبة عادة ما تكون تجربة سيئة للمستخدم ، يمكنك اختيار الخيار غير المتزامن. تعني كتابة التعليمات البرمجية بهذه الطريقة تقسيمها إلى أجزاء أصغر يمكن للمتصفح تشغيلها بينما لا يتعامل مع واجهة المستخدم. يجب أن تكون الأجزاء صغيرة بدرجة كافية بحيث إذا كانت واجهة المستخدم بحاجة إلى التحديث ، يمكن للمتصفح إنهاء تنفيذ القطعة الحالية والانضمام إلى واجهة المستخدم.
تمت إضافة عمال الويب إلى HTML5 لتقديم حل أفضل لهذه المشكلة. بدلاً من إجبارك على الإبداع باستخدام التعليمات البرمجية غير المتزامنة ، فإنها تتيح لك فصل وظيفة بشكل واضح لتعمل في سلسلة الرسائل المعزولة الخاصة بها.
سهّل ذلك على المطورين كتابة هذا الرمز وحسّن تجربة المستخدم أيضًا.
حالات الاستخدام لعمال الويب
أي تطبيق يتطلب الكثير من الحسابات من جانب العميل يمكن أن يستفيد من العاملين على الويب.
لنفترض ، على سبيل المثال ، أن التطبيق الخاص بك يريد إنشاء تقرير استخدام ، ويقوم بتخزين جميع البيانات الموجودة على العميل بدافع مخاوف الخصوصية.
لإنشاء هذا التقرير ، يجب أن يقوم تطبيق الويب الخاص بك باسترداد البيانات وإجراء العمليات الحسابية عليها وتنظيم النتائج وتقديمها إلى المستخدم.
إذا حاولت القيام بذلك في السلسلة الرئيسية ، فلن يتمكن المستخدم تمامًا من استخدام التطبيق أثناء معالجة التطبيق للبيانات. بدلاً من ذلك ، يمكنك نقل بعض أو كل هذه التعليمات البرمجية إلى عامل ويب. هذا يسمح للمستخدم بالاستمرار في استخدام التطبيق أثناء إجراء الحسابات.
كيفية استخدام Web Workers في JavaScript
ال Web Worker API يحدد كيفية استخدام العاملين على الويب. يتضمن استخدام واجهة برمجة التطبيقات هذه إنشاء كائن عامل باستخدام مُنشئ العامل مثل هذا:
let newWorker = عامل ('عامل. js');ال عامل يقبل المُنشئ اسم ملف JavaScript كمعامل خاص به ويقوم بتشغيل الملف في سلسلة محادثات جديدة. تقوم بإرجاع كائن عامل للسماح لمؤشر الترابط الرئيسي بالتفاعل مع مؤشر ترابط العامل.
يتفاعل العاملون مع السلسلة الرئيسية عن طريق إرسال الرسائل ذهابًا وإيابًا. أنت تستخدم ملف postMessage وظيفة لإرسال الأحداث بين العامل والموضوع الرئيسي. استخدم ال على الرسالة مستمع الحدث للاستماع إلى الرسائل من الطرف الآخر.
هذا مثال على رمز. أولاً ، قد يبدو الموضوع الرئيسي كما يلي:
يترك عامل = الجديد عامل ('worker.js')
worker.postMessage ('يا!')
العامل. onmessage = وظيفة(ه) {
console.log ('يقول موضوع عامل'، بيانات إلكترونية)
}
يقوم هذا الخيط الرئيسي بإنشاء كائن عامل من worker.js ، ثم يرسل رسالة إليه باستخدام العامل. ثم تحدد مستمع الحدث ، مشابهًا لمفهوم a مستمع أحداث DOM. سيتم إطلاق حدث في كل مرة يرسل فيها العامل رسالة مرة أخرى إلى مؤشر الترابط الرئيسي ، ويسجل المعالج رسالة العامل إلى وحدة التحكم.
الكود الموجود داخل العامل (worker.js) له وظيفة واحدة:
onmessage = وظيفة(ه) {
يترك الرسالة = البيانات الإلكترونية ؛
console.log ('قال الخيط الرئيسي'، رسالة)؛
postMessage ('أهلاً!')
}يستمع إلى أي رسائل مرسلة من الموضوع الرئيسي ، ويسجل الرسالة إلى وحدة التحكم ، ويرسل رسالة عودة إلى الموضوع الرئيسي.
كانت جميع الرسائل في هذا المثال عبارة عن سلاسل ، ولكن هذا ليس مطلبًا: يمكنك إرسال أي نوع من البيانات تقريبًا كرسالة.
يسمى نوع العمال الذين رأيتهم حتى الآن بالعاملين المتفانين. يمكنك فقط الوصول إليهم من الملف الذي أنشأتهم فيه (وهم مخصصون له). العاملون المشتركون هم عكس ذلك: يمكنهم تلقي رسائل من عدة ملفات وإرسال رسائل إليها. العمال المشتركون هم نفس العمال المتفانين من الناحية المفاهيمية ، لكن عليك استخدامهم بشكل مختلف قليلاً.
لنلقي نظرة على مثال. بدلاً من استخدام مُنشئ العامل ، يجب على كل ملف يريد استخدام عامل مشترك إنشاء كائن عامل باستخدام SharedWorker ():
يترك SharedWorker = الجديد SharedWorker ('worker.js')لكن الاختلافات لا تتوقف عند هذا الحد. لكي يرسل ملف أو يستقبل رسالة من عامل مشترك ، يجب أن يقوم بذلك عن طريق الوصول إلى ملف ميناء بدلا من القيام بذلك مباشرة. هذا هو الشكل الذي يبدو عليه:
SharedWorker.port.postMessage ('أهلاً!')
SharedWorker.port.onMessage = وظيفة(ه) {
console.log ('أرسل العامل المشترك'، البيانات الإلكترونية) ؛
}
يجب عليك استخدام كائن المنفذ داخل العامل أيضًا:
عند الاتصال = وظيفة(ه) {
مقدار ثابت المنفذ = الموانئ الإلكترونية [0];
port.onmessage = وظيفة(ه) {
console.log ('تم استلام الرسالة'، بيانات إلكترونية)
port.postMessage ('مرحبًا!');
}
}
ال عند الاتصال ينطلق المستمع في كل مرة يحدث فيها اتصال بمنفذ (عندما يكون ملف على الرسالة تم تعيين مستمع الحدث في الموضوع الرئيسي).
عندما يحدث ذلك ، يحصل الكود على المنفذ الذي تم توصيله للتو من حدث الاتصال ويخزنه في متغير. بعد ذلك ، يسجل الرمز ملف على الرسالة المستمع على كائن المنفذ. يقوم الرمز بعد ذلك بتسجيل الرسالة إلى وحدة التحكم ، ويستخدم المنفذ لإرسال رسالة مرة أخرى إلى السلسلة الرئيسية.
يعمل العاملون على الويب على تحسين تجربة المستخدم
عمال الويب عبارة عن خيوط JavaScript تتيح لك تشغيل أجزاء معقدة وطويلة من التعليمات البرمجية في الخلفية. سيتجنب هذا الرمز بعد ذلك حظر واجهة المستخدم. يجعل استخدام العاملين على الويب كتابة هذا النوع من التعليمات البرمجية أسهل بكثير ، ويحسن تجربة مستخدم التطبيق. يمكنك إنشاء عاملين على الويب والتفاعل معهم باستخدام واجهة برمجة تطبيقات الويب الخاصة بعامل الويب.