react perf devtool
vtool
تبحث عن المشرفين
devtool لفحص أداء مكونات React
مقدمة
العرض التوضيحي
يستخدم
ثَبَّتَ
الاستخدام
وصف
مراحل
تطبيق
المساهمة
رخصة
React Performance DevTool هو امتداد متصفح لفحص أداء مكونات React. يدرس إحصائياً أداء مكونات React استنادًا إلى التدابير التي يتم جمعها عن طريق التفاعل باستخدام window.performance API.
جنبا إلى جنب مع امتداد المتصفح ، يمكن أيضًا فحص التدابير في وحدة التحكم. انظر قسم الاستخدام لمزيد من التفاصيل.
بدأ هذا المشروع بغرض تمديد العمل الذي قامت به Will Chen بناءً على اقتراح لجدول رد الفعل. يمكنك قراءة المزيد عنها هنا.
عرض تجريبي للتمديد المستخدم لفحص أداء مكونات React على موقع الويب الخاص بي.
يمكن أيضًا تسجيل تدابير الأداء إلى وحدة تحكم. مع كل إعادة تقديم ، يتم تحديث التدابير وتسجيلها إلى وحدة التحكم.
قم بإزالة أو إلغاء تثبيت مثيلات المكون التي لا يتم استخدامها.
افحص ما يحظر أو قضاء المزيد من الوقت بعد بدء العملية.
فحص الجدول وشاهد أي مكونات ، تحتاج إلى كتابة خطاف دورة حياة MountComponentUpdate.
فحص المكونات التي تستغرق المزيد من الوقت للتحميل.
لاستخدام هذا DevTool ، ستحتاج إلى تثبيت وحدة NPM التي ستسجل مستمعًا (اقرأ المزيد حول هذا في قسم الاستخدام) وامتداد المتصفح.
تثبيت الامتداد
تمثل الامتدادات أدناه الإصدار المستقر الحالي.
تثبيت وحدة NPM
npm install react-perf-devtool
يتوفر بناء umd أيضًا عبر UNPKG
< script crossorigin src = "https://unpkg.com/[email protected]/lib/npm/hook.js" > </ script >يعتمد هذا التمديد والحزمة أيضًا على React. يرجى التأكد من تثبيت هؤلاء أيضًا.
ملاحظة - وحدة NPM مهمة ومطلوبة لاستخدام DevTool. لذا تأكد من تثبيته قبل استخدام امتداد المتصفح.
يشرح هذا القسم من الوثائق استخدام DevTool و API لتسجيل مراقب في تطبيق React.
يعتمد react-perf-devtool على window.PerformanceObserver الأصلية. API PerformanceObserver التي تمت إضافتها في Chrome V52 و Firefox V57 . لمزيد من المعلومات ، راجع مستندات Mozilla الرسمية هنا.
لاستخدام ملحق DevTool هذا ، ستحتاج إلى تسجيل مراقب في تطبيقك والذي سيراقب مجموعة من البيانات (مقاييس الأداء) على مدار وقت.
سجل المراقب
تسجيل المراقب أمر بسيط للغاية وهو مجرد استدعاء وظيفة واحدة. دعونا نرى كيف!
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( ) يمكنك وضع هذا الرمز داخل ملف index.js الخاص بك (موصى به) أو أي ملف آخر في التطبيق الخاص بك.
ملاحظة - يجب استخدام هذا فقط في وضع التطوير عندما تحتاج إلى فحص أداء مكونات React. تأكد من إزالته عند بناء للإنتاج.
يقوم تسجيل مراقب بربط كائن يحتوي على معلومات حول الأحداث ومقاييس الأداء لمكونات React على كائن النافذة ، والتي يمكن الوصول إليها داخل النافذة التي تم فحصها باستخدام Eval ().
مع كل إعادة تقديم ، يتم تحديث هذا الكائن بتدابير وأحداث جديدة. يعتني الامتداد بمسح الذاكرة وأيضًا ذاكرة التخزين المؤقت.
يمكنك أيضًا تمرير كائن option ورد callback اختياري يتلقى وسيطة تحتوي على التدابير المحسورة والمجمعة
باستخدام رد الاتصال
يمكن أيضًا تمرير رد اتصال اختياري إلى registerObserver الذي يتلقى تدابير محلية كوسيطة.
يمكنك استخدام رد الاتصال هذا لتفقد التدابير المحسورة والمجمعة ، أو يمكنك دمجه مع أي حالة استخدام أخرى. يمكنك أيضًا الاستفادة من مقاييس الأداء هذه باستخدام Google Analytics عن طريق إرسال هذه التدابير إلى لوحة معلومات التحليلات. تم توثيق هذه العملية هنا.
مثال -
const { registerObserver } = require ( 'react-perf-devtool' )
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( { } , callback ) بعد تسجيل المراقب ، ابدأ خادم التطوير المحلي وانتقل إلى http://localhost:3000/ .
ملاحظة - يعمل هذا الامتداد فقط من أجل React 16 أو أعلى إصدارات منه.
بعد تثبيت الامتداد بنجاح ، سترى علامة تبويب تسمى REACT Performance في أدوات مطور Chrome.
يمكن أيضًا تسجيل تدابير الأداء إلى وحدة التحكم. ومع ذلك ، فإن عملية طباعة التدابير ليست مباشرة. ستحتاج إلى إعداد خادم يستمع إلى التدابير. لهذا ، يمكنك استخدام Micro by Zeit وهو الخدمات microservice HTTP.
npm install --save micro
يمكنك تمرير كائن خيار كوسيطة لتسجيل registerObserver لتمكين التسجيل وإعداد رقم المنفذ.
باستخدام كائن الخيار
{
shouldLog : boolean , // default value: false
port : number // default value: 8080
timeout : number // default value: 2000
} يمكنك تمرير ثلاث خصائص إلى كائن option ، shouldLog port .
shouldLog - يستغرق قيمة منطقية . إذا تم ضبطها على TRUE ، فسيتم تسجيل التدابير إلى وحدة التحكم.
port - رقم المنفذ للخادم حيث سيتم إرسال التدابير
timeout - قيمة مهلة لتأجيل تهيئة الامتداد.
إذا استغرق تحميل التطبيق الخاص بك بعض الوقت ، فمن الأفضل تأجيل تهيئة التمديد عن طريق تحديد قيمة المهلة من خلال خاصية timeout . هذا يضمن تحميل الامتداد فقط بعد تحميل التطبيق بشكل صحيح في المتصفح بحيث يمكن تقديم التدابير المحدثة. ومع ذلك ، يمكنك تخطي هذا الخاصية إذا كان التطبيق الخاص بك في حجم صغير.
مثال
// index.js file in your React App
const React = require ( 'react' )
const ReactDOM = require ( 'react-dom' )
const { registerObserver } = require ( 'react-perf-devtool' )
const Component = require ( './Component' ) // Some React Component
const options = {
shouldLog : true ,
port : 8080 ,
timeout : 12000 // Load the extension after 12 sec.
}
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback )
ReactDOM . render ( < Component /> , document . getElementById ( 'root' ) ) // server.js
const { json } = require ( 'micro' )
module . exports = async req => {
console . log ( await json ( req ) )
return 200
} // package.json
{
"main" : "server.js" ,
"scripts" : {
"start-micro" : "micro -p 8080"
}
}مخطط التدابير
فيما يلي مخطط مقاييس الأداء التي يتم تسجيلها إلى وحدة التحكم.
{
componentName ,
mount : { // Mount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
render : { // Render time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
update : { // Update time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
unmount : { // Unmount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
totalTimeSpent , // Total time taken by the component combining all the phases
percentTimeSpent , // Percent time
numberOfInstances , // Number of instances of the component
// Time taken in lifecycle hooks
componentWillMount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentDidMount: {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentWillReceiveProps : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
shouldComponentUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentDidUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUnmount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
}عناصر
يمكنك أيضًا فحص أداء مكونات محددة باستخدام خيارات من خلال خاصية components .
مثال -
const options = {
shouldLog : true ,
port : 3000 ,
components : [ 'App' , 'Main' ] // Assuming you've these components in your project
}
function callback ( measures ) {
// do something with measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback ) يمثل قسم النظرة العامة نظرة عامة على إجمالي الوقت (٪) التي اتخذتها جميع المكونات في التطبيق الخاص بك.
الوقت الذي تستغرقه جميع المكونات - يوضح الوقت الذي تستغرقه جميع المكونات (الجمع بين جميع المراحل).
مدة الوقت لارتكاب التغييرات - توضح الوقت الذي يقضيه في ارتكاب تغييرات. اقرأ المزيد عن هذا هنا
مدة الوقت لارتكاب تأثيرات المضيف - تُظهر الوقت الذي تقضيه في ارتكاب تأثيرات مضيفة ، أي ارتكابها عند إدراج شجرة جديدة (تحديث) ولا. من الآثار المضيفة (عدد التأثير في الالتزام).
مدة زمنية لاتصال طرق دورة الحياة - تقارير عن مدة استدعاء خطافات دورة الحياة وعدم إجمالي الأساليب التي تسمى ، عند جدولة خطاف دورة الحياة تحديثًا متتاليًا.
إجمالي الوقت
Clear - الزر Clear يقوم بمسح التدابير من الجداول وأيضًا يمسح النتائج.
إعادة تحميل النافذة التي تم تفتيشها - يقوم هذا الزر بإعادة تحميل النافذة التي تم تفتيشها ويعرض التدابير الجديدة.
الأحداث المعلقة - هذا يشير إلى التدابير المعلقة (بيانات أداء رد الفعل).
يوضح هذا القسم الوقت الذي يستغرقه أحد مكونات في مرحلة ما ، وعدد مثيلات المكون وإجمالي الوقت في الجمع بين جميع المراحل في MS و ٪
الواردة أدناه هي المراحل المختلفة التي يقيس فيها رد الفعل الأداء:
React Tree Reliviciation - في هذه المرحلة ، يجعل React عقدة الجذر ويخلق عملًا قيد التقدم. إذا كانت هناك بعض التحديثات المتتالية أثناء التوفيق ، فسوف يتوقف عن أي قياسات نشطة وسيستأنفها في حلقة مؤجلة. يحدث هذا عندما يقطع التحديث العالي المستوى العرض السابق. إذا تم طرح خطأ أثناء مرحلة العرض ، فإنه يلتقط الخطأ من خلال العثور على أقرب حدود خطأ أو يستخدم الجذر إذا لم يكن هناك حدود خطأ.
التزام التغييرات - في هذه المرحلة ، يرتكب العمل الذي تم الانتهاء منه. أيضا ، يتحقق مما إذا كانت عقدة الجذر لديها أي تأثير جانبي. إذا كان له تأثير ، فأضفه إلى القائمة (اقرأ المزيد من بنية بيانات القائمة هنا) أو ارتكب جميع الآثار الجانبية في الشجرة. إذا كان هناك تحديث مجدول في الالتزام الحالي ، فإنه يعطي تحذيرًا حول التحديث المتتالي في خطاف دورة الحياة . خلال مرحلة الالتزام ، يتم جدولة التحديثات في الالتزام الحالي. أيضًا ، يتم جدولة التحديثات إذا لم تكن المرحلة/المرحلة مكونًا أو مكونًا أو مكونًا.
ارتكاب تأثيرات مضيفة - يتم ارتكاب تأثيرات المضيف كلما تم إدخال شجرة جديدة. مع كل تحديث جديد مجدولة ، يتم حساب إجمالي تأثيرات المضيف. تتم هذه العملية على مرحلتين ، تقوم المرحلة الأولى بجميع إدخال عقدة المضيف ، والحذف ، والتحديث ، والمرجع ، والمرحلة الأخرى تؤدي جميع عمليات الاسترداد لدورة الحياة والمرجع.
ارتكاب دورة حياة - عندما تم الانتهاء من التمريرة الأولى أثناء ارتكاب تأثيرات المضيف ، أصبحت شجرة العمل قيد التقدم الشجرة الحالية. لذا فإن العمل قيد التقدم هو الحالي أثناء ComponentDidMount/Update . في هذه المرحلة ، يتم ارتكاب جميع دورات الحياة وعمليات التراجع عن المرجع. يحدث ارتكاب دورات الحياة كتمريرة منفصلة بحيث تم بالفعل استدعاء جميع المواضع والتحديثات والحذف في الشجرة بأكملها .
في الإصدار السابق من DevTool ، تم الاستعلام عن مقاييس الأداء بدلاً من الاستماع لنوع الحدث. هذا مطلوب للتعليق على الخط داخل حزمة react-dom ( react-dom.development.js ) بحيث يمكن التقاط هذه المقاييس بواسطة هذه الأداة.
ولكن الآن ، بمساعدة API الأداء ، يمكن تسجيل المراقب للاستماع إلى حدث من نوع معين والحصول على الإدخالات (مقاييس الأداء). يوفر react-perf-devtool واجهة برمجة تطبيقات أعلى مراقب الأداء ، وهي وظيفة تسجل مراقبًا.
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )يستمع هذا المراقب إلى حدث قياس أداء React. إنه يربط كائن يحتوي على معلومات حول الأحداث ومقاييس الأداء لمكونات React إلى كائن النافذة والتي يمكن الوصول إليها بعد ذلك داخل النافذة التي تم تفتيشها باستخدام eval ().
مع كل إعادة تقديم ، يتم تحديث هذا الكائن بتدابير وأحداث جديدة. يعتني الامتداد بمسح الذاكرة وأيضًا ذاكرة التخزين المؤقت.
يمكن أيضًا تمرير كائن option ورد callback اختياري إلى registerObserver . يكون كائن option مفيدًا عندما يتم تسجيل مقاييس الأداء إلى وحدة تحكم. يستقبل callback نتائج محسورة ومجمعة (المقاييس) كوسيطة يمكن استخدامها للتحليلات.
يحدث حساب النتائج وتجميعها داخل إطار التطبيق وليس في DevTool. لها فوائدها الخاصة.
اقرأ دليل المساهمة
معهد ماساتشوستس للتكنولوجيا
