يجمع ReactJS بين سرعة جافا سكريبت وقدرات العرض الفريدة لإنشاء تطبيقات ديناميكية للغاية وموجهة نحو الأداء وتستجيب لإدخال المستخدم. يشير
تقرير حالة JS لعام 2018
إلى الأداء باعتباره السبب الرئيسي وراء اكتساب ReactJS شعبية كبيرة في مثل هذا الوقت القصير. عندما يتعلق الأمر بخيارات إنشاء تطبيقات من صفحة واحدة (SPAs) ، يوفر React مزايا أداء على Angular وأطر عمل ومكتبات JavaScript الأخرى. نظرا لأن React يحتفظ ب DOM افتراضي في JavaScript ، فيمكنه تحديد الحد الأدنى من التغييرات اللازمة بسرعة لإحضار المستند إلى الحالة المطلوبة. نظرا لحفظ حالة مكون React في جافا سكريبت ، يمكنك تجنب الوصول إلى DOM.
بالنسبة للتطبيقات الصغيرة، تعد تحسينات الأداء التي تقدمها ReactJS خارج الصندوق أكثر من كافية. ومع ذلك ، مع تطور تطبيقاتك لتشمل طرق عرض أكثر تعقيدا ، يمكن أن تصبح صيانة DOMs الافتراضية وموازاتها أمرا مكلفا. تطبيق كبير هو ضخمة ومتفرعة ومعقدة جعل شجرة. كلما قمت بتحديث الدعائم إلى عقدة ، يجب على React إعادة تكوين شجرة العرض من العقدة على طول الطريق إلى أسفل الفروع ، وأخيرا الورقة ، حيث تتم مقارنات DOM الافتراضية.
ومع ذلك ، مع نمو قاعدة المستخدمين ، يميل التطبيق إلى النمو في التعقيدات ، ويحمل المزيد من التبعيات ، ويدمج المزيد من المكونات الإضافية التابعة لجهات خارجية. احتمال الوصول إلى اختناقات الأداء يتوسع فقط. اضرب ذلك مع عدد متزايد باستمرار من التطبيقات على ملايين الأجهزة التي تدعم الويب من مختلف الأحجام والأنواع ولا يمكنك التهرب من كابوس الأداء المحتمل أسفل الخط.
على سبيل المثال ، يتوقع المستخدمون 60 إطارا في الثانية عند التفاعل مع تطبيق ويب في المتصفح ، والذي يمنحك 16.7 مللي ثانية فقط لعرض كل إطار. عندما يكون تطبيقك بطيئا، غالبا ما يستغرق الرد على أحداث المستخدم وقتا طويلا، ويستغرق وقتا طويلا جدا لمعالجة البيانات أو لإعادة عرض البيانات الجديدة. في معظم الحالات، لا تقوم بمعالجة البيانات المعقدة على مدار الساعة – فأنت تضيع الوقت في إعادة العرض.
مما لا شك فيه أنه حتى تطبيق React الأكثر تصميما وتحسينا بشكل لا تشوبه شائبة يتطلب أداة لمراقبة الأداء.
يتصاعد مكون المراقبة باستخدام التشكيل الجانبي
يمكن لعدد المرات التي يتم فيها إعادة عرض المكونات ، إلى جانب مقدار الموارد والوقت المستغرق ، أن يقول الكثير عن أداء تطبيق React في الإنتاج. مكون Profiler هو مكون React مضمن يقيس وقت “التحميل” أو “التحديث” لشجرة فرعية للمكونات. كلما تم تحديث مكون أو تركيبه، يتم ختم وظيفة onRender الخاصة ب Profiler بمرور الوقت. يوفر Profiler طريقة سهلة لعرض المشكلات في تطبيقات React .
import { unstable_Profiler as Profiler } from "react"
<Profiler id="Counter" onRender={callback}>
<Counter />
</Profiler>
يحدد دعامة المعرف إعداد التقارير، بينما تقترن الدالة onRender بالوسيطات عند تركيب مكون العداد أو مراجعته.
function callback(id, phase, actualTime, baseTime, startTime, commitTime) {
log("id: " + id, "phase:" + phase, "actualTime:" + actualTime, "baseTime: " + baseTime, "startTime: " + startTime, "commitTime: " + commitTime)
}
يتم جمع وسيطات الدالة طوابع زمنية عند تقديم مكون العداد . سنلقي نظرة على كل من المعلمات.
() المرجع نفسه. المعرف الفريد المقترن بمكون ملف التعريف.
المرحلة. يكتشف هذا المرحلة سواء في مرحلة “التحميل” أو مرحلة “التحديث”.
الوقت الفعلي. الوقت الذي يستغرقه Profiler لتقديم تحديثات ملتزمة.
وقت الأساس. الوقت الذي يستغرقه أحد المكونات في شجرة Profiler للتحميل أو التحديث.
وقت البدء. يسجل الطابع الزمني يبدأ Profiler في قياس وقت التركيب / العرض لأحفاده.
التزم بالوقت. الوقت الذي استغرقه React لإجراء تحديث.
مراقبة المكونات التي يتم إعادة تقديمها باستخدام أدوات مطور React
أثناء التطوير ، إذا تعرفت على المكون الذي يتم إعادة عرضه ، فيمكنه حفظ تطبيقك في الإنتاج من اختناقات الأداء المختلفة. تجعل أدوات React Developer ذلك بسيطا للمطور عن طريق تلوين حدود المكونات ، كلما كانت تعيد العرض. إذا أعيد عرض المكونات الرئيسية، تمييز الحواف التي تلتقط مكونات العداد والعد لفترة وجيزة.
يعتمد نوع اللون الذي يظهر على عدد مرات / تكرار إعادة عرض المكون ، مما يمنحك القدرة على تحديد المكون الذي يتم تحديثه بسهولة بشكل متكرر حتى تتمكن من تحسينه بشكل مناسب.
| أخضر – تحديث منخفض التردد
| أزرق – تحديث متوسط التردد
v أحمر – يدل على تحديث متكرر جدا
تحديد مشكلات Perf باستخدام React.addons.Perf
لبدء تشغيل Perf، يجب عليك الاتصال ب Perf.start() من وحدة التحكم، وتسجيل الإجراء، واستدعاء Perf.stop() لإيقاف Perf. بعد ذلك ، يمكنك الاتصال بأي من الطرق التالية لعرض مجموعات من القياسات المفيدة.
Perf.printWasted()
Perf.printWasted() هي الطريقة الأكثر فائدة التي تتصل بها على React.addons.Perf. يخبرك Perf.printWasted()مقدار الوقت الضائع في التعاقد على شجرة العرض ومقارنة DOMs الافتراضية مع بعضها البعض. هذه المكونات المذكورة أعلاه هي المرشحين الرئيسيين لتحسين أداء تطبيق React الخاص بك.
Perf.printInclusive() / Perf.printExclusive()
تقوم Perf.printInclusive () و Perf.printExclusive() بإرجاع مقدار الوقت الذي خصصته لعرض المكونات الخاصة بك. لن يجد معظم المطورين هذه الطريقة مفيدة للغاية ، حيث يتم حل مشكلات الأداء الناتجة عن العرض عادة عن طريق عدم العرض باستخدام الطريقة المذكورة أعلاه: Perf.printWasted().
ومع ذلك، يمكن أن تساعدك هذه الطريقة في تحديد المكونات التي تقوم بإجراء عمليات حسابية ثقيلة في أساليب دورة الحياة. سوف تتعلم أنه بعد إصلاح مشكلات printWasted ، فإن رمز التطبيق غير المحسن هو الذي يستغل تلك الموارد الثمينة. بدلا من ذلك ، يمكنك إحضار ملف تعريف جافا سكريبت القياسي في Chrome DevTool وإلقاء نظرة على مكالمات الوظائف الأكثر ثقلا مباشرة.
Perf.printDOM()
يعرض Perf.printDOM() كافة عمليات DOM التي تم تشغيلها أثناء عرض أشجار React . إذا كنت تلعب مع ReactJS لبعض الوقت ، فأنت تعلم أن هذا ربما يكون الجزء الأكثر تعقيدا. لتصفح قائمة لا نهاية لها من الصفوف والأعمدة إذا كان تطبيقك معقدا جدا ، فقد يستغرق الأمر وقتا طويلا للكشف عن الخطأ الذي حدث بالضبط.
بمجرد تقديم مجموعتك الأولى من المكونات ، تتوقع أن عمليات إعادة العرض المستقبلية ستعيد استخدام عقد DOM الحالية ولا تنشئ عقدا جديدة – وهو تحسين توفره DOM الافتراضية من Rereact ويأخذها كل مطور React على محمل الجد.
Perf.printDOM() مفيد للعثور على غرائب المتصفح الغريبة والمكلفة أو مراقبة تعديلات DOM الرئيسية التي لا يمكن التنبؤ بها.
المراقبة الاصطناعية لتطبيقات الويب ReactJS
في حين أن الطرق المذكورة أعلاه هي جزء لا يتجزأ من مراقبة أداء تطبيق React ، إلا أنها تفشل في محاكاة الإجراءات التي يقوم بها المستخدم النموذجي أثناء استخدام التطبيق. يمكن لمنصة المراقبة الاصطناعية ،
جنبا إلى جنب مع مسجل
البرامج النصية ، تشغيل البرامج النصية المسجلة مسبقا وإعادة تشغيلها ، ومحاكاة معاملات المستخدم وإجراءات المستخدم النموذجية في متصفح حقيقي. على سبيل المثال ، التنقل الأساسي ، وإرسال النماذج ، ومعاملات عربة التسوق ، والألعاب عبر الإنترنت ، وسرعة التمرير ، والرسوم المتحركة ، وما إلى ذلك.
على الرغم من أن Perf أداة ممتازة لمراقبة مقدار الوقت الضائع في تقديم شجرة ومقارنة DOM الافتراضية مع DOM الفعلي ، إلا أنها لا تترجم إلى ما قد يواجهه المستخدمون أثناء استخدام التطبيق. تتكون حلول
مراقبة تطبيقات الويب
الاصطناعية ، مثل تلك التي تقدمها
Dotcom-Monitor
، من أداة برمجة نصية سهلة الاستخدام لكتابة البرامج النصية المختلفة لاختبار المراقبة. يمكن تشغيل هذه البرامج النصية في بيئة اختبار خاصة والتحقق من تطبيق الويب الخاص بك بحثا عن معلمات مختلفة على فترات منتظمة. يتيح لك استخدام أداة مراقبة اصطناعية تستخدم متصفحات حقيقية الحصول على نتائج الأداء الأكثر دقة.
بالإضافة إلى ذلك ، يمكن تنفيذ المراقبة الاصطناعية باستخدام أجهزة ومتصفحات ومواقع جغرافية مختلفة. مع تطبيقات الصفحة الواحدة، لا تكون سرعة تحميل الصفحة الأولية بنفس أهمية تجربة المستخدم النهائي. ليس من الضروري فقط التأكد من تشغيل تطبيقاتك وتشغيلها ، ولكن يجب مراقبة الوظائف أيضا. على سبيل المثال، هل يمكن للمستخدمين تنفيذ الإجراءات اللازمة، وما هي خدمات الجهات الخارجية أو واجهات برمجة التطبيقات، إن وجدت، التي تسبب تأخيرات أو مشكلات.
الهدف من مراقبة تطبيقات الويب هو أتمتة عملية تحديد المشكلات قبل أن تؤثر على عدد أكبر من المستخدمين. باستخدام المراقبة الاصطناعية، يمكنك إعداد تنبيهات استنادا إلى متطلبات تطبيق React المحدد الخاص بك، والحصول على إشعار على الفور عند حدوث خطأ ما. على عكس الأدوات الأخرى التي نوقشت أعلاه ، تتخذ المراقبة الاصطناعية نهجا استباقيا ، مما يحررك من العملية التي تستغرق وقتا طويلا حيث يتعين عليك أنت وفريقك إجراء اختبارات يدوية.
مراقبة تطبيقات ReactJS: الخلاصة
في حين أن هذه الأدوات مفيدة لمراقبة تطبيقات React الخاصة بك في بيئات التطوير ، فإن مراقبة الأداء في الإنتاج تمثل تحديا ذا حجم آخر ، وتحمل وزنا أكبر. الاستسلام لعقلية “يعمل على آلتي” هو حكاية تحذيرية عندما يكون أداء تطبيقك في الإنتاج على المحك. من ناحية أخرى ، تمنحك أدوات المراقبة الاصطناعية تقارير أداء من منظور المستخدم النهائي ، وليس من بعض حالات الاختبار المبتذلة التي يتخيلها المطورون. ومع ذلك ، إذا كنت تتطلع إلى رفع مستوى مراقبة أداء ReactJS ، فاحصل على
نسخة تجريبية مجانية لمدة 30 يوما من Dotcom-Monitor اليوم
.
