استخدام أداة tachometer من Google لقياس تغيّرات أداء JavaScript في Discourse

عند العمل على واجهة العميل في نواة Discourse أو في الإضافات أو السمات، من المهم مراعاة الأثر على الأداء. يوفر مشروع ‘Tachometer’ من Google أداة قياس أداء صارمة إحصائياً يمكننا استخدامها لقياس تأثير التغييرات بشكل قاطع.

في جوهره، تقوم هذه الأداة بأخذ قائمة من عناوين URL وتحميلها بطريقة ‘round-robin’. لكل عملية تحميل للصفحة، تقوم بأخذ بعض مقاييس الأداء. بعد مئات أو آلاف التكرارات، تنتج جدول مقارنة.

الجمال في نهج ‘round-robin’ هذا هو أنه يساعد في تقليل تأثير العوامل الخارجية على القياسات.

الخطوة 1: إضافة performance.measure()

ستختلف المنهجية هنا بناءً على ما تختبره. لكن بشكل أساسي: تحتاج إلى تقديم قيمة performance.measure() ليقرأها Tachometer.

إذا كنت ترغب في عرض الوقت الذي يستغرقه Discourse للإقلاع والعرض، يمكنك استخدام قياس “discourse-init-to-paint” المدمج. لأي شيء آخر، يمكنك تقديم performance.measure خاص بك واستخدامه.

يمكنك التحقق من عمله باستخدام تبويب الأداء في أدوات المطور في متصفحك:

إذا كنت تحاول قياس نشاط يتطلب تفاعل المستخدم (مثل فتح قائمة)، يمكنك تحقيق ذلك بإضافة شيء ما كهذا في مُهيِّئ (initializer) للنقر على الزر بعد ثانية واحدة من تحميل الصفحة:

setTimeout(() => document.querySelector(".my-button").click(), 1000);

الخطوة 2: تحديد عناوين URL للاختبار

أولاً، تأكد من أنك تبني أصول Ember في وضع الإنتاج. يمكن تحقيق ذلك بتشغيل الخادم مع EMBER_ENV=production.

للحصول على عنواني URL مختلفين، هناك نهجان رئيسيان:

إذا كان تغييرك صغيراً بما يكفي ليتم وضعه خلف علم ميزة (feature flag) بسهولة، فيمكنك إضافة منطق لتبديله بناءً على باراميتر استعلام URL. ثم يمكن أن يكون عنوانا URL الخاص بك

http://localhost:3000?flag=before
http://localhost:3000?flag=after

إذا كان التغيير كبيراً جداً لذلك، فيمكنك استنساخ Discourse في مجلد ثانٍ وتشغيل نسخة ثانية من rails.

EMBER_ENV=production UNICORN_PORT=3001 bin/dev

ثم سيكون عنوانا URL الخاص بك

http://localhost:3000
http://localhost:3001

إذا اتخذت هذا النهج، تأكد من أن كلا نسختي التطبيق لديهما القياسات التلغرافية للأداء التي قدمتها في الخطوة 1 من هذا الدليل.

الخطوة 3: تكوين Tachometer

هذا هو ملف bench.json الخاص بي، والذي سيأخذ 300 عينة من كل هدف:

{
  "timeout": 5,
  "sampleSize": 300,
  "benchmarks": [
    {
      "measurement": {
        "mode": "performance",
        "entryName": "discourse-init-to-paint"
      },
      "expand": [
        {
          "url": "http://localhost:3000",
          "name": "before"
        },
        {
          "url": "http://localhost:3001",
          "name": "after"
        }
      ]
    }
  ]
}

الخطوة 4: تشغيل المعيار المرجعي (Benchmark)

لتقليل الضوضاء، أوقف أي أنشطة غير ذات صلة على جهاز عملك، ثم ابدأ المعيار المرجعي بأمر مثل:

npx tachometer@latest --config ./bench.json

عند الانتهاء، يجب أن ترى مقارنة بين الأداء قبل وبعد.

تحذيرات

كما هو الحال مع أي تجارب من هذا النوع، من الجدير النظر في القيود. على سبيل المثال:

  • قد لا تعكس اختلافات الأداء على جهاز عملك التطويري مباشرةً على متصفحات/أجهزة أخرى.

  • عملية إقلاع Discourse عبر وكيل Ember-CLI ليست تماماً مماثلة لما هي عليه في الإنتاج. عند إجراء تغييرات هيكلية (مثل تحديثات الإطار)، قد يكون هذا مهماً.

  • غالباً ما يختلف الأداء بناءً على حالة التطبيق (مثل عدد المواضيع التي يتم عرضها)، لذا قد لا تكون نتائجك قابلة للتكرار تماماً في بيئات أخرى.


هذا المستند مُدار بالإصدارات - اقترح تغييرات على github.

17 إعجابًا