استخدام «العداد» من Google لقياس تغييرات أداء JS في Discourse

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

بشكل أساسي، تأخذ هذه الأداة قائمة عناوين URL وتحمّلها بطريقة «دائرية» (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: تشغيل الاختبار

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

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

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

محاذير

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

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

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

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


يتم التحكم في إصدار هذا المستند - اقترح التغييرات على GitHub.

17 إعجابًا