permon

بيرمون

بسيطة لكل شكل مون لتطبيقات وألعاب الويب. الخروج عن قسم التكوين والاستخدام للحصول على نظرة عامة مفصلة على الميزات.

بداية سريعة

حزمة (وحدة)

 yarn add permon 

 import { Permon } from 'permon'

new Permon ( )

الفانيليا

 ( function ( ) {
  var s = document . createElement ( 'script' )
  s . onload = function ( ) {
    new permon . Permon ( )
  }
  s . src = '//tsopeh.github.io/permon/dist/permon.iife.js'
  document . head . appendChild ( s )
} ) ( )

إشارة مرجعية

يمكنك اختبار permon على أي صفحة ويب تدعم الإشارة المرجعية ، من خلال إنشاء إشارة مرجعية جديدة وملء حقل العناوين الخاص به مع مقتطف الكود أدناه. بدلاً من ذلك ، يمكنك لصق نفس المقتطف في شريط عناوين المتصفح. من المهم أن يبدأ المقتطف بـ javscript: .

javascript: ( function ( ) { var s = document . createElement ( "script" ) ; s . onload = function ( ) { new permon . Permon ( ) } , s . src = "//tsopeh.github.io/permon/dist/permon.iife.js" , document . head . appendChild ( s ) } ) ( ) ;

ملحوظة

• تقوم بعض المتصفحات تلقائيًا بإزالة javscript: نص ، على اللصق ، كتدبير أمان. في مثل هذه الحالات ، عليك أن تكتبها باليد ؛

• لسوء الحظ ، لا تدعم Safari المرجعية منذ iOS 15.

التكوين والاستخدام

الافتراضات

بشكل افتراضي ، ستعرض Permon ثلاث لوحات (FPS ، زمن انتقال الإطار (MS = milliseconds) وذاكرة كومة JS (MB = megabytes)) وتحديث كل لوحة مرة كل 250 مللي ثانية.

 import { Permon } from 'permon'

new Permon ( )

المقاييس

يمكنك أن تذكر صراحة المقاييس التي تريد تتبعها. على سبيل المثال ، إذا كنت مهتمًا فقط بـ FPS ، فيمكنك القيام بما يلي.

 import { Permon } from 'permon'

new Permon ( {
  metrics : {
    fps : {
      calculator : Permon . UTILS . metrics . fps . createCalculator ( ) ,
      panel : Permon . UTILS . metrics . fps . createPanel ( ) ,
    } ,
  } ,
} )

يمكنك أيضًا تحديد المقاييس الخاصة بك.

يتكون مقياس من جزأين ، وظيفة "الآلة الحاسبة" التي تنتج إحصائيات ، ولوحة "واجهة المستخدم ( الاختيارية) (الاختيارية ).

وظيفة "الآلة الحاسبة" هي وظيفة بسيطة ستتلقى طابعًا زمنيًا جديدًا على كل إطار رسوم متحركة. يمكنك استخدام هذه الطوابع الزمنية لمساعدتك في حساب أي احصائيات تريدها.

"اللوحة" عبارة عن كائن يحتوي على: * عنصر DOM الذي سيتم إلحاقه بجوار لوحات أخرى ؛ * وظيفة updateDom ، التي تتلقى الإحصائيات التي تنتجها الآلة الحاسبة ، وتحديث عنصر DOM لعرض الإحصائيات.

المقاييس الافتراضية الثلاثة التي يوفرها Permon ، جميعها تنتج الإحصائيات التي تتبع واجهة BasicStats (انظر أدناه).

 // Stats that we want to callculate.
interface BasicStats {
  current : number
  mean : number
  lowest : number
  highest : number
}

const calculator = ( timestamp : number ) : BasicStats => {
  /*
   * Calculate stats.
   */
  return stats
}

const panel = {
  dom : domElement ,
  updateDom : ( stats : BasicStats ) => {
    /*
    * Display stats in the `domElement`.
    */
  } ,
}

// Usage.

import { Permon } from 'permon'

new Permon ( {
  metrics : {
    ... Permon . UTILS . metrics . createAllDefaultMetrics ( ) , // This will create all the default metrics.
    myCustomMetric : {
      calculator : calculator ,
      panel : panel ,
    } ,
  } ,
} )

أحد الأمثلة البسيطة لالتقاط البيانات الإضافية هو تحديد وقت العميل عند تسجيل الإحصائيات الأخرى. لهذا سنتجاهل الطابع الزمني ، نظرًا لأنه غير ضروري للحساب ، ويمكننا أن نفترض أن واجهة المستخدم ليست ضرورية.

 import { Permon } from 'permon'

new Permon ( {
  metrics : {
    ... Permon . UTILS . metrics . createAllDefaultMetrics ( ) , // This will create all the default metrics.
    clientTime : {
      calculator : ( ) => ( new Date ) . toISOString ( ) ,
    } ,
  } ,
} )

الوصول إلى البيانات

يمكن لـ Permon نشر الإحصاءات التي تم جمعها بشكل دوري لجميع المقاييس المحددة. يمكنك الوصول إلى هذه البيانات باستخدام رد اتصال onPublishStats ؛ وتحديد التأخير بين حدثين للنشر.

 new Permon ( {
  onPublishStats : ( stats ) => {
    console . table ( stats )
  } ,
  minDelayMsBetweenPublishingStats : 1000 , // Once per second, by default. Setting this option to `0` can be interpreted as "As fast as possible".
} )

يمكنك استخدام هذه الآلية بالاشتراك مع خيار headless ، لجمع وإرشحة إحصائيات الأداء بشكل دوري إلى بعض خدمة تجميع البيانات. يمكن معالجة هذه البيانات لاحقًا وتساعدك على تحديد كيف يتصرف تطبيقك فعليًا على أجهزة العملاء.

 new Permon ( {
  onPublishStats : ( stats ) => {
    fetch ( 'https://some-data-aggregator-service...' , {
      method : 'POST' ,
      headers : { 'Content-Type' : 'application/json' } ,
      body : JSON . stringify ( stats ) ,
    } )
  } ,
  minDelayMsBetweenPublishingStats : 60 * 1000 , // Once every minut.
  headless : true , // Do not render any panels
} ) 

سؤال وجواب

يبدو أن هذه الأداة مشابهة للآخرين. ماذا يجلب هذا إلى الطاولة؟

بيرمون ، وألواح واجهة المستخدم الخاصة بها كانت مستوحاة من STATS.JS و GameStats. الفرق هو أن بيرمون هو رأي في كيفية ومتى يقيس الأداء - بينما يبقى مفتوحا للتمديد. يمكنك إنشاء المقاييس و/أو اللوحات الخاصة بك. يمكنك الوصول إلى الإحصائيات والتعامل معها كما ترغب في ذلك. إنه مكتوب في TypeScript ، والذي يوفر تجربة تطوير أفضل للمطورين والمشرفين.

لماذا يوجد تأخير موجز قبل أن تظهر ألواح FPS وألواح Frame Latency أي بيانات؟

هذا هو السلوك المتعمد. بعد تحميل الصفحة ، أو عندما تصبح الصفحة المراقبة مرئية ، ستعطي Permon الصفحة بعض الوقت لتحقيق الاستقرار قبل حساب المقاييس. وبالتالي ، فإن تقليل فرصة الحصول على مسامير برية لمقاييس زمن الوصول للإطار.

لماذا لا يتم تقليل الإحصائيات التي تراقب Permon ونشرها عند تقليل الصفحة التي يتم مراقبتها ، أو عندما يتم تركيز علامة تبويب المتصفح الأخرى في نافذة التطبيق نفسها؟

يعتمد Permon على رد اتصال requestAnimationFrame لتحديد ما إذا كان سيتم تقديم إطار ، ولتحديد متى يكون الوقت المناسب للقيام بحساب المقاييس. وبهذه الطريقة ، يقلل من النفقات العامة للأداء التي يتم مراقبتها. من ناحية أخرى ، من أجل توفير الموارد ، قامت المتصفحات بتنفيذ تحسين ، حيث لا يتم استدعاء requestAnimationFrame للصفحات (علامات التبويب) غير مرئية (تقليلها ، أو عندما تكون علامة تبويب أخرى في التركيز على نافذة التطبيق نفسها). لهذا السبب ، عندما تصبح صفحة مراقبة غير مرئية ، يتم تعليق بيرمون بشكل فعال ، حتى يصبح مرئيًا مرة أخرى.