في JavaScript، هناك طرق متعددة لتحسين واجهة المستخدم الشاملة للموقع. ال 'عامل الويب' هو أحد هذه الأساليب التي تسمح للخيط الرئيسي بمواصلة التنفيذ دون حظره. يشتمل على مثيل محرك JavaScript المنفصل الخاص به، وبالتالي لا يمكنه استدعاء وظائف سلسلة المحادثات الرئيسية.
ستناقش هذه المقالة كيفية الاستفادة منها 'عامل الويب' لتعدد مؤشرات الترابط في جافا سكريبت.
ما هي عمال الويب؟
'عمال الويب' يتوافق مع واجهة برمجة تطبيقات المتصفح التي تمكن JavaScript من تشغيل المهام بالتوازي/في نفس الوقت على سلسلة رسائل منفصلة/مخصصة.
ما هي الحاجة لعمال الويب؟
نظرًا لأن JavaScript أحادية الترابط، فإن رموز JavaScript المعقدة تحظر تسلسل واجهة المستخدم، أي إيقاف النافذة الرئيسية التي تتعامل مع جميع مهام التحديث وتنفيذ أحداث إدخال المستخدم وما إلى ذلك. في مثل هذا السيناريو، تتأثر تجربة المستخدم . ولمواجهة هذه المشكلة، 'عامل الويب' يدخل حيز التنفيذ ويحل حظر مؤشر ترابط واجهة المستخدم.
كيفية استخدام عمال الويب لتعدد العمليات باستخدام JavaScript؟
لصنع 'عامل الويب' ، استخدم منشئ العامل. إنه يأخذ عنوان URL كوسيطة له، والذي يتوافق مع مسار ملف البرنامج النصي العامل الذي ينفذ الوظيفة المطلوبة. ومع ذلك، لتضمين التعليمات البرمجية العاملة في ملف HTML، استخدم ملف 'سائل لزج' لكتابة كود العامل.
بناء الجملة (إنشاء عامل الويب)
مقدار ثابت س = جديد عامل ( 'worker.js' ) ;بناء الجملة (إرسال رسالة إلى العامل)
مقدار ثابت س = جديد عامل ( 'worker.js' ) ;
بناء الجملة (تلقي رسالة من العامل)
س. com.onmessage = وظيفة ( حدث ) {وحدة التحكم. سجل ( حدث. بيانات ) ;
} ;
مثال: استخدام 'Web Worker' لحساب مضروب رقم في JavaScript
يستخدم المثال التالي 'عامل()' منشئ لإنشاء عامل ويب وحساب مضروب الرقم:
< لغة البرمجة >
< رأس >
< نمط h2 = 'محاذاة النص: المركز؛' > مثال لعمال الويب h2 >
رأس >
< جسم >
< النصي >
مقدار ثابت س = جديد عامل ( عنوان URL. createObjectURL ( جديد سائل لزج ( [
`
// البرنامج النصي العامل
مقدار ثابت حقيقة = ( ن ) => {
لو ( ن == 0 || ن == 1 ) {
يعود 1 ن ;
}
آخر {
يعود BigInt ( ن ) * حقيقة ( BigInt ( ن ) - 1 ن ) ;
}
} ;
الذات. com.onmessage = ( حدث ) => {
مقدار ثابت مع = حقيقة ( حدث. بيانات ) ;
الذات. postMessage ( مع. إلى سلسلة ( ) ) ;
} ; `
] , { يكتب : 'نص/جافا سكريبت' } ) ) ) ;
س. postMessage ( 15 ن ) ;
س. com.onmessage = ( حدث ) => {
مقدار ثابت خارج = حدث. بيانات ;
وحدة التحكم. سجل ( 'مضروب 15 عبر عامل الويب-> ' , خارج ) ;
} ;
جسم >
لغة البرمجة >
في هذا الكود قم بتطبيق الخطوات التالية:
- أولا، حدد العنوان المذكور.
- بعد ذلك قم بإنشاء 'عامل الويب' كائن له عنوان URL لكائن Blob الذي يشتمل على التعليمات البرمجية للعامل.
- يتم تضمين الكود المخصص للعامل في دالة مجهولة تحسب مضروب الرقم عبر دالة متكررة.
- كما يستمع العامل للرسائل المرسلة عبر الموضوع الرئيسي باستخدام 'الرسالة الذاتية' الحدث، يسترد مضروب الرقم الذي تم تمريره، ويعطي النتيجة للخيط الرئيسي عبر ''postMessage ()' طريقة.
- في الموضوع الرئيسي، قم بإنشاء مثيل عامل وأرسل له رسالة بالرقم ' 15 ن '. هنا، ' ن ' يشير إلى قيمة 'BigInt'.
- بعد أن ينتهي العامل من حساب المضروب، فإنه يرسل النتيجة/النتيجة مرة أخرى إلى الخيط الرئيسي باستخدام ''postMessage ()' طريقة.
- وأخيرًا، يقوم الخيط الرئيسي بجلب/استقبال النتيجة في ملف 'على الرسالة' الحدث وإرجاع المضروب المقابل للرقم الموجود على وحدة التحكم.
انتاج |
مزايا عمال الويب
المعالجة المتوازية : في حالة تشغيل نفس الكود بطريقة متوازية.
لا يوجد انقطاع في تنفيذ التعليمات البرمجية: يتم تنفيذ التعليمات البرمجية بغض النظر عن التحديثات وما إلى ذلك في الصفحة الحالية.
تتبع الحركة: يتم اكتشاف الحركة بالكامل في عامل الخلفية.
تمكين مؤشرات الترابط المتعددة: تعمل هذه على تمكين تعدد مؤشرات الترابط في JavaScript.
تعزيز الأداء: قم بتحسين الأداء من خلال القيام بمهام مكثفة/صعبة في سلاسل منفصلة.
تجربة المستخدم الفعالة: يؤدي ذلك إلى تجنب حظر الموضوع الرئيسي، مما يؤدي إلى تجربة مستخدم سريعة الاستجابة.
القيود المفروضة على العاملين على شبكة الإنترنت
ومع ذلك، هناك بعض القيود على العاملين على شبكة الإنترنت كذلك. وبيانها كما يلي:
- الاستفادة بشكل أكبر من الذاكرة.
- لا يمكن تحديث DOM في مؤشر ترابط عامل أو استدعاء كائن النافذة.
خاتمة
'عمال الويب' يتوافق مع واجهة برمجة تطبيقات المتصفح التي تمكن JavaScript من تشغيل المهام في نفس الوقت على سلسلة رسائل منفصلة/مخصصة. يمكن استخدامها عن طريق استخدام عنوان URL كوسيطة، والتي تتوافق مع مسار ملف البرنامج النصي العامل. ناقشت هذه المدونة استخدام 'Web Workers' لتعدد مؤشرات الترابط في JavaScript.