عند العمل على الشيفرة من جانب العميل في Discourse core/plugins/themes، من المهم مراعاة تأثير الأداء. يوفر مشروع ‘Tachometer’ من Google أداة قياس أداء صارمة إحصائيًا يمكننا استخدامها لقياس تأثير التغييرات بشكل قاطع.
في الأساس، تأخذ هذه الأداة قائمة بعناوين URL وتقوم بتحميلها بترتيب ‘تناوبي’ (round-robin). لكل تحميل صفحة، تأخذ بعض قياسات الأداء. بعد مئات/آلاف التكرارات، تنتج جدول مقارنة.
جمال هذا النهج ‘التناوبي’ هو أنه يساعد على تقليل تأثير العوامل الخارجية على القياسات.
الخطوة 1: إضافة performance.measure()
سيختلف النهج هنا بناءً على ما تختبره. ولكن بشكل أساسي: تحتاج إلى إدخال قيمة performance.measure() ليقرأها Tachometer.
إذا كنت تريد قياس الوقت الذي يستغرقه Discourse للتمهيد والتصيير، يمكنك استخدام القياس المدمج “discourse-init-to-paint”. لأي شيء آخر، يمكنك إدخال performance.measure خاص بك واستخدامه.
يمكنك التحقق من عمله باستخدام علامة التبويب “الأداء” (performance) في أدوات المطور في متصفحك:
إذا كنت تحاول قياس نشاط يتطلب تفاعل المستخدم (على سبيل المثال، فتح قائمة)، يمكنك تحقيق ذلك عن طريق إضافة شيء مثل هذا في مُهيئ (initializer) للنقر على الزر بعد ثانية واحدة من تحميل الصفحة:
setTimeout(() => document.querySelector(".my-button").click(), 1000);
الخطوة 2: تحديد عناوين URL للاختبار
أولاً، تأكد من أنك تقوم ببناء أصول Ember في وضع الإنتاج. يمكن تحقيق ذلك عن طريق تشغيل الخادم باستخدام EMBER_ENV=production.
للحصول على عنواني URL مختلفين، هناك نهجان رئيسيان:
إذا كان التغيير الخاص بك صغيرًا بما يكفي ليتم تمييزه بسهولة بعلامة ميزة (feature-flagged)، فيمكنك إضافة منطق لتبديله بناءً على معلمة استعلام (URL query parameter). عندئذٍ يمكن أن يكون عنوانا 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.