عرض مصدر ReactNative/profile hermes

<noinclude>{{DISPLAYTITLE:فحص أداء تطبيق React Native باستخدام هيرميس Hermes}}</noinclude>
يمكنك تصوّر أداء شيفرة [[JavaScript]] في تطبيق [[ReactNative|React Native]] باستخدام [https://github.com/facebook/hermes Hermes]، وهو محرك JavaScript صغير وخفيف الحجم ومُحسَّن لتشغيل إطار عمل React Native على نظام Android (اطّلع على المزيد عن [[ReactNative/hermes|استخدام Hermes مع React Native]]). يساعد Hermes في تحسين أداء التطبيق كما يعرض طرقًا لتحليل أداء شيفرة JavaScript المُشغَّلة.

سنتعلم في هذه الصفحة كيفية فحص أداء تطبيق React Native الذي يعمل على Hermes وكيفية تصوّر فاحص الأداء  باستخدام تبويب الأداء Performance في أدوات تطوير كروم [https://developer.chrome.com/docs/devtools/evaluate-performance/reference/ Chrome DevTools].<blockquote>'''ملاحظة:''' تأكّد من [[ReactNative/hermes|تفعيل hermes في تطبيقك]] قبل البدء.</blockquote>اتّبع الإرشادات أدناه لبدء فحص الأداء:

# سجّل فاحص أداء أخذ عينات من Hermes.
# نفّذ أمرًا من CLI.
# افتح فاحص الأداء الذي نُزِّل على الأدوات Chrome DevTools.

== تسجيل فاحص الأداء sampling من Hermes ==
يمكنك تسجيل فاحص أداء sampling (أخذ عينات) من قائمة المطور كما يلي:

# انتقل إلى طرفية خادم Metro التي تكون قيد التشغيل.
# اضغط <code>d</code> من لوحة المفاتيح لفتح قائمة المطور Developer Menu.
# اختر Enable Sampling Profiler.
# نفّذ شيفرة JavaScript الخاصة بك في تطبيقك (كالضغط على الأزرار وغير ذلك).
# افتح قائمة المطور بالضغط على <code>d</code> مرة أخرى.
# حدّد Disable Sampling Profiler لإيقاف التسجيل وحفظ مراقب أداء أخذ العينات.

ستعرُض قائمة منبثقة الموقعَ الذي حُفِظ فيه فاحص الأداء ذاك، الذي هو ‎<code>/data/user/0/com.appName/cache/*.cpuprofile</code>
[[ملف:HermesProfileSaved.png|بديل=Hermes Profile Saved|مركز|تصغير]]

== نفذ أمرًا من CLI ==

يمكنك استخدام [https://github.com/react-native-community/cli React Native CLI] لتحويل تعقّب فاحص أداء Hermes إلى تعقّب فاحص أداء Chrome، ثم سحبه إلى جهازك المحلي باستخدام الأمر:<syntaxhighlight lang="bash">
npx react-native profile-hermes [destinationDir]
</syntaxhighlight>

=== تفعيل خريطة الشيفرة البرمجية المحوّلة source map ===
تُستخدَم خريطة source map لتحسين فاحص الأداء وربط أحداث التعقّب بشيفرة التطبيق. يمكنك إنشاء خريطة source map تلقائيًا عند تحويل تعقّب فاحص أداء Hermes إلى تعقّب فاحص أداء Chrome عن طريق تفعيل <code>bundleInDebug</code> إذا كان التطبيق في وضع التطوير، ويسمح ذلك لإطار عمل React Native ببناء الحزمة bundle أثناء عملية التشغيل بالطريقة التالية:

1. أضف ما يلي في ملف <code>android/app/build.gradle</code> الخاص بتطبيقك:<syntaxhighlight lang="javascript">
project.ext.react = [
  bundleInDebug: true,
]
</syntaxhighlight><blockquote>'''ملاحظة:''' تأكد من تنظيف البناء عند إجراء أي تغييرات في <code>build.gradle</code>.</blockquote>2. نظّف البناء عن طريق تشغيل الأمر:<syntaxhighlight lang="bash">
cd android && ./gradlew clean
</syntaxhighlight>3. ثم شغّل تطبيقك:<syntaxhighlight lang="bash">
npx react-native run-android
</syntaxhighlight>

=== أخطاء شائعة ===

==== <code>adb: no devices/emulators found</code> أو <code>adb: device offline</code> ====
* '''سبب حدوث هذا الخطأ''': لا تستطيع CLI الوصول إلى الجهاز أو المحاكي (عبر adb) الذي تستخدمه لتشغيل التطبيق.

* '''كيفية الإصلاح''': تأكد من توصيل جهاز Android أو المحاكي وتشغيله، حيث يعمل الأمر فقط عندما يمكنه الوصول إلى adb.

==== <code>There is no file in the cache/ directory</code> ====
* '''سبب حدوث هذا الخطأ''': يتعذر على CLI العثور على أي ملف ‎'''.cpuprofile''' في المجلد '''cache/‎''' الخاص بتطبيقك. قد يكون السبب أنك نسيت تسجيل فاحص أداء من الجهاز.
* '''كيفية الإصلاح''': اتبع التعليمات في فقرة "تسجيل فاحص أداء أخذ عينات من Hermes" لتفعيل أو تعطيل فاحص الأداء من الجهاز.

==== <code>Error: your_profile_name.cpuprofile is an empty file</code> ====
* '''سبب حدوث هذا الخطأ''': فاحص الأداء فارغ، وقد يكون ذلك بسبب عدم تشغيل Hermes تشغيلًا صحيحًا.
* '''كيفية الإصلاح''': تأكد من تشغيل تطبيقك على أحدث إصدار من Hermes.

== فتح فاحص الأداء في أدوات تطوير كروم Chrome DevTools ==
يمكنك فتح فاحص الأداء في أدوات Chrome DevTools من خلال الخطوات التالية:

# افتح أدوات تطوير كروم Chrome DevTools.
# اختر تبويب "الأداء Performance".
# انقر بزر الفأرة الأيمن واختر "تحميل فاحص الأداء Load profile".

[[ملف:openChromeProfile.png|بديل=open Chrome Profile|مركز|تصغير|600x600px]]

== كيفية عمل محوّل فاحص أداء Hermes ==

تنسيق فاحص أداء عينات Hermes هو  <code>JSON object format</code>، ولكن التنسيق الذي تدعمه أدوات DevTools من Google هو التنسيق <code>JSON Array Format</code>. يمكنك العثور على مزيد من المعلومات حول التنسيقات في [https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview مستند تنسيق أحداث التعقّب].<syntaxhighlight lang="javascript">
export interface HermesCPUProfile {
  traceEvents: SharedEventProperties[];
  samples: HermesSample[];
  stackFrames: { [key in string]: HermesStackFrame };
}
</syntaxhighlight>يحتوي فاحص أداء Hermes على معظم معلوماته المشفَّرة في خصائص العينات <code>samples</code> و إطارات المكدس <code>stackFrames</code>. كل عينة هي لقطة من مكدس استدعاء الدالة في تلك العلامة الزمنية المحدَّدة حيث أن كل عينة لها خاصية <code>sf</code> التي تتوافق مع استدعاء دالة.<syntaxhighlight lang="javascript">
export interface HermesSample {
  cpu: string;
  name: string;
  ts: string;
  pid: number;
  tid: string;
  weight: string;
  /**
   * ‫سيشير إلى عنصر في الكائن stackFrames الخاص بفاحص أداء Hermes
   */
  sf: number;
  stackFrameData?: HermesStackFrame;
}
</syntaxhighlight>يمكن العثور على معلومات استدعاء الدالة في الكائن <code>stackFrames</code> الذي يحتوي على أزواج مفتاح - كائن key-object، حيث يكون المفتاح هو رقم <code>sf</code> ويعطينا الكائن المقابل جميع المعلومات المتعلّقة بالدالة بما في ذلك رقم <code>sf</code> لدالتها الأب. يمكن تعقّب هذه العلاقة بين الأب والابن للأعلى للعثور على معلومات عن جميع الدوال التي تعمل في علامة زمنية معينة.<syntaxhighlight lang="javascript">
export interface HermesStackFrame {
  line: string;
  column: string;
  funcLine: string;
  funcColumn: string;
  name: string;
  category: string;
  /**
   * قد تكون الدالة الأب موجودة أو غير موجودة
   */
  parent?: number;
}
</syntaxhighlight>يجب في هذه المرحلة تحديد بعض المصطلحات الأخرى، وهي:

# '''العقد Nodes''': الكائنات المقابلة لأرقام <code>sf</code> في الكائن <code>stackFrames</code>
# '''العقد النشطة Active Nodes''': هي العقد التي تُشغَّل في علامة زمنية معينة. تُصنَّف العقدة على أنها مُشغَّلة إذا كان رقمها <code>sf</code> في مكدس استدعاء الدالة، ويمكن الحصول على مكدس الاستدعاءات هذا من رقم <code>sf</code> الخاص بالعينة والتعقّب لأعلى حتى تتوّفر أرقام <code>sf</code> الأب.

يمكن بعد ذلك استخدام العينات <code>samples</code> ومكدس الإطارات <code>stackFrames</code> جنبًا إلى جنب لتوليد جميع أحداث البداية والنهاية في العلامات الزمنية المقابلة، حيث:

# '''أحداث أو عقد البداية''': هي عقد غير موجودة في مكدس استدعاءات الدالة الخاص بالعينة السابقة ولكنها موجودة في مكدس استدعاءات الدالة للعينة الحالية.
# '''أحداث أو عقد النهاية''': هي العقد الموجودة في مكدس استدعاءات الدالة الخاص بالعينة السابقة ولكنها غير موجودة في مكدس استدعاءات الدالة للعينة الحالية.

[[ملف:CallStackDemo.jpg|بديل=Call Stack Demo|مركز|تصغير|544x544بك]]
يمكنك الآن إنشاء مخطّط <code>flamechart</code> لاستدعاءات الدوال عندما يكون لديك جميع معلومات هذه الدوال بما في ذلك علامات البداية والنهاية الزمنية.

يمكن للمحوّل <code>hermes-profile-transformer</code> تحويل أي فاحص أداء منشَأ باستخدام Hermes إلى تنسيق يمكن عرضه مباشرة في أدوات Chrome DevTools. يمكنك العثور على مزيد من المعلومات حول هذا الموضوع من خلال <code>[https://github.com/react-native-community/hermes-profile-transformer react-native-community/hermes-profile-transformer@]</code>.

== مصادر ==

* [https://reactnative.dev/docs/profile-hermes صفحة Profiling with Hermes في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Docs]]