permon

permón

Un simple monio de Formance para aplicaciones y juegos web. Consulte la sección Configuración y uso de la descripción detallada de las características.

Comienzo rápido

Paquete (módulo)

 yarn add permon 

 import { Permon } from 'permon'

new Permon ( )

Vainilla

 ( 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 )
} ) ( )

Marcador

Puede probar permon en cualquier página web que admita Bookmarklets, creando un nuevo marcador y llenando su campo de dirección con el fragmento de código a continuación. Alternativamente, puede pegar el mismo fragmento en la barra de direcciones del navegador. Es importante que el fragmento comience con 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 ) } ) ( ) ;

Nota

• Algunos navegadores eliminan automáticamente el javscript: Texto, en Paste, como medida de seguridad. En tales casos, debe escribirlo a mano;

• Desafortunadamente, Safari no admite Bookmarklets desde iOS 15.

Configuración y uso

Valores predeterminados

De manera predeterminada, Permon mostrará tres paneles (FPS, latencia de cuadro (MS = milisegundos) y la memoria JS Heap (MB = Megabytes)) y actualizaría cada panel una vez cada 250 ms.

 import { Permon } from 'permon'

new Permon ( )

Métrica

Puede indicar explícitamente de qué métricas desea mantener el seguimiento. Por ejemplo, si solo está interesado en FPS, puede hacer lo siguiente.

 import { Permon } from 'permon'

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

También puede definir sus propias métricas.

Una métrica está hecha de dos partes, la función "Calculadora" que produce estadísticas y la interfaz de usuario " opcional )" Panel ".

La función "Calculadora" es una función simple que recibirá una nueva marca de tiempo en cada marco de animación. Puede usar estas marcas de tiempo para ayudarlo a calcular las estadísticas que desee.

El "panel" es un objeto que contiene: * un elemento DOM que se agregará junto a otros paneles; * Una función updateDom que recibe las estadísticas producidas por la calculadora y actualiza el elemento DOM para mostrar las estadísticas.

Las tres métricas predeterminadas que ofrece Permon, todas producen las estadísticas que siguen la interfaz BasicStats (ver más abajo).

 // 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 ,
    } ,
  } ,
} )

Un ejemplo simple de capturar datos adicionales es determinar el tiempo del cliente cuando se registraron las otras estadísticas. Para esto ignoraremos la marca de tiempo, ya que no es necesaria para el cálculo, y podemos suponer que la interfaz de usuario no es necesaria.

 import { Permon } from 'permon'

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

Acceder a los datos

Permon puede publicar periódicamente las estadísticas recopiladas para todas las métricas definidas. Puede acceder a estos datos utilizando la devolución de llamada onPublishStats ; y defina el retraso entre dos eventos editoriales.

 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".
} )

Puede usar este mecanismo en combinación con la opción headless , para recopilar y enviar periódicamente estadísticas de rendimiento a algún servicio de agregación de datos. Estos datos se pueden procesar más tarde y ayudarlo a determinar cómo se comporta realmente su aplicación en los dispositivos de los clientes.

 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
} ) 

Preguntas y respuestas

Esta herramienta parece ser similar a otras. ¿Qué trae este?

Permon, y sus paneles de interfaz de usuario se inspiraron en Stats.js y Gamestats. La diferencia es que Permon está obstinado sobre cómo y cuándo mide el rendimiento, mientras permanece abierto para la extensión. Puede crear sus propias métricas y/o paneles. Puede acceder a las estadísticas y manejarlas como lo desee. Está escrito en TypeScript, que proporciona una mejor experiencia de desarrollo para desarrolladores y mantenedores.

¿Por qué hay un breve retraso antes de que FPS y los paneles Frame Latency muestren algún dato?

Este es un comportamiento intencional. Después de que la página se carga, o cuando la página monitoreada se vuelve visible, Permon le dará a la página algo de tiempo para estabilizarse antes de calcular las métricas. Por lo tanto, reduciendo la posibilidad de obtener picos salvajes para FPS y métricas de latencia de cuadros.

¿Por qué Permon monitorea y publica estadísticas cuando la página monitoreada se minimiza, o cuando la pestaña de otro navegador se enfoca en la misma ventana de la aplicación?

Permon se basa en la devolución de llamada requestAnimationFrame para determinar si se representará un marco y para determinar cuándo es un buen momento para hacer el cálculo de las métricas. De esta manera, minimiza la sobrecarga de rendimiento que es CAUESD por monitoreo. Por otro lado, para ahorrar recursos, los navegadores han implementado una optimización, donde el requestAnimationFrame no se convoca en las páginas (pestañas) que no son visibles (minimizados o cuando otra pestaña se enfoca en la misma ventana de aplicación). Debido a esto, cuando una página monitoreada se vuelve invisible, Permon se suspende de manera efectiva, hasta que se vuelve visible nuevamente.