عند العمل على التعليمات البرمجية من جانب العميل في Discourse core/plugins/themes، من المهم مراعاة تأثير الأداء. يوفر مشروع Google ‘Tachometer’ أداة قياس أداء صارمة إحصائيًا يمكننا استخدامها لقياس تأثير التغييرات بشكل قاطع.
بشكل أساسي، تأخذ هذه الأداة قائمة بعناوين URL وتقوم بتحميلها بطريقة “دورية”. لكل تحميل صفحة، تأخذ بعض قياسات الأداء. بعد مئات/آلاف التكرارات، تنتج جدول مقارنة.
جمال هذا النهج “الدوري” هو أنه يساعد على تقليل تأثير العوامل الخارجية على القياسات.
الخطوة 1: إضافة performance.measure()
سيختلف النهج هنا بناءً على ما تختبره. ولكن بشكل أساسي: تحتاج إلى تقديم قيمة performance.measure() ليقرأها Tachometer.
إذا كنت ترغب في قياس الوقت الذي يستغرقه تشغيل وعرض Discourse، يمكنك استخدام القياس المدمج “discourse-init-to-paint”. لأي شيء آخر، يمكنك تقديم performance.measure الخاص بك واستخدامه.
يمكنك التحقق من أنه يعمل باستخدام علامة التبويب “الأداء” في أدوات مطوري المتصفح لديك:
إذا كنت تحاول قياس نشاط يتطلب تفاعل المستخدم (على سبيل المثال، فتح قائمة)، يمكنك تحقيق ذلك عن طريق إضافة شيء مثل هذا في مُهيئ لالنقر على الزر بعد ثانية واحدة من تحميل الصفحة:
setTimeout(() => document.querySelector(".my-button").click(), 1000);
الخطوة 2: تحديد عناوين URL للاختبار
أولاً، تأكد من أنك تقوم ببناء أصول Ember في وضع الإنتاج. يمكن تحقيق ذلك عن طريق تشغيل الخادم باستخدام EMBER_ENV=production.
للحصول على عنواني URL مختلفين، هناك نهجان رئيسيان:
إذا كان تغييرك صغيرًا بما يكفي ليتم تمييزه بسهولة، فيمكنك إضافة منطق لتبديله بناءً على معلمة استعلام URL. ثم يمكن أن تكون عناوين URL الخاصة بك هي
http://localhost:4200?flag=before
http://localhost:4200?flag=after
إذا كان التغيير كبيرًا جدًا لذلك، فيمكنك استنساخ Discourse في دليل ثانٍ وتشغيل نسخة ثانية من ember-cli. يمكن توجيهها إلى نفس خادم Rails باستخدام أمر مثل
EMBER_ENV=production pnpm ember serve --port 4201 --proxy http://localhost:3000
ثم ستكون عناوين URL الخاصة بك هي
http://localhost:4200
http://localhost:4201
إذا اتبعت هذا النهج، فتأكد من أن كلا نسختي التطبيق لديهما قياسات الأداء التي قدمتها في الخطوة 1 من هذا الدليل.
الخطوة 3: تكوين Tachometer
هذا هو ملف bench.json الخاص بي، والذي سيأخذ 300 عينة من كل هدف:
{
"timeout": 5,
"sampleSize": 300,
"benchmarks": [
{
"measurement": {
"mode": "performance",
"entryName": "discourse-init-to-paint"
},
"expand": [
{
"url": "http://localhost:4200",
"name": "before"
},
{
"url": "http://localhost:4201",
"name": "after"
}
]
}
]
}
الخطوة 4: تشغيل قياس الأداء
لتقليل الضوضاء، أوقف أي أنشطة غير ذات صلة على محطة العمل الخاصة بك، ثم ابدأ قياس الأداء بأمر مثل:
npx tachometer@latest --config ./bench.json
عند الانتهاء، يجب أن ترى مقارنة بين الأداء قبل وبعد.
تحذيرات
كما هو الحال مع أي تجارب من هذا القبيل، يجدر النظر في القيود. على سبيل المثال:
-
قد لا تتطابق اختلافات الأداء على محطة العمل الخاصة بالتطوير لديك مباشرة مع المتصفحات/الأجهزة الأخرى.
-
عملية تشغيل Discourse عبر وكيل Ember-CLI ليست مطابقة تمامًا لما هي عليه في الإنتاج. عند إجراء تغييرات هيكلية (على سبيل المثال، تحديثات الإطار)، قد يكون هذا مهمًا.
-
غالبًا ما يختلف الأداء بناءً على حالة التطبيق (على سبيل المثال، عدد الموضوعات التي يتم عرضها)، لذلك قد لا تكون نتائجك قابلة للتكرار تمامًا في بيئات أخرى.
هذه الوثيقة يتم التحكم في إصدارها - اقترح تغييرات على github.