permon

permon

Un monnor par formance simple pour les applications Web et les jeux. Découvrez la section Configuration et utilisation pour la vue d'ensemble détaillée des fonctionnalités.

Démarrage rapide

Package (module)

 yarn add permon 

 import { Permon } from 'permon'

new Permon ( )

Vanille

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

Signet

Vous pouvez tester permon sur n'importe quelle page Web qui prend en charge les bookmarklets, en créant un nouveau signet et en remplissant son champ d'adresse avec l'extrait de code ci-dessous. Alternativement, vous pouvez coller le même extrait dans la barre d'adresse du navigateur. Il est important que l'extrait commence par 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 ) } ) ( ) ;

Note

• Certains navigateurs suppriment automatiquement le javscript: texte, sur la pâte, comme mesure de sécurité. Dans de tels cas, vous devez l'écrire à la main;

• Malheureusement, Safari ne prend pas en charge les signets depuis iOS 15.

Configuration et utilisation

Par défaut

Par défaut, Permon affichera trois panneaux (FPS, la latence de trame (MS = millisecondes) et la mémoire de tas JS (MB = mégaoctets)) et mettent à jour chaque panneau une fois tous les 250 ms.

 import { Permon } from 'permon'

new Permon ( )

Métrique

Vous pouvez indiquer explicitement les mesures dont vous souhaitez garder la trace. Par exemple, si vous êtes uniquement intéressé par FPS, vous pouvez effectuer ce qui suit.

 import { Permon } from 'permon'

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

Vous pouvez également définir vos propres mesures.

Une métrique est composée de deux parties, de la fonction "calculatrice" qui produit des statistiques et de l'interface utilisateur ( facultatif ) "Panneau".

La fonction "calculatrice" est une fonction simple qui recevra un nouvel horodatage sur chaque trame d'animation. Vous pouvez utiliser ces horodatages pour vous aider à calculer les statistiques que vous souhaitez.

Le "panneau" est un objet qui contient: * un élément DOM qui sera ajouté à côté d'autres panneaux; * Une fonction updateDom , qui reçoit les statistiques produites par la calculatrice et met à jour l'élément DOM pour afficher les statistiques.

Les trois mesures par défaut que Peron propose, toutes produisent les statistiques qui suivent l'interface BasicStats (voir ci-dessous).

 // 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 exemple simple de capture de données supplémentaires est de déterminer le temps du client lorsque les autres statistiques ont été enregistrées. Pour cela, nous ignorerons l'horodatage, car il n'est pas nécessaire pour le calcul, et nous pouvons supposer que l'interface utilisateur n'est pas nécessaire.

 import { Permon } from 'permon'

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

Accéder aux données

Peron peut publier périodiquement les statistiques collectées pour toutes les mesures définies. Vous pouvez accéder à ces données en utilisant le rappel onPublishStats ; et définir le retard entre deux événements d'édition.

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

Vous pouvez utiliser ce mécanisme en combinaison avec une option headless , pour collecter périodiquement et envoyer des statistiques de performances à un service d'agrégation de données. Ces données peuvent être traitées ultérieurement et vous aider à déterminer comment votre application se comporte réellement sur les appareils clients.

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

Q&R

Cet outil semble être similaire aux autres. Qu'est-ce que celui-ci apporte à la table?

Permon et ses panneaux d'interface utilisateur ont été inspirés par Stats.js et Gamestats. La différence est que Permon est opinion sur la façon et le moment où il mesure les performances - alors qu'elle reste ouverte pour l'extension. Vous pouvez créer vos propres métriques et / ou panneaux. Vous pouvez accéder aux statistiques et les gérer comme vous le souhaitez. Il est écrit dans TypeScript, qui offre une meilleure expérience de développement aux développeurs et aux mainteneurs.

Pourquoi y a-t-il un bref délai avant que les panneaux FPS et Frame Latency ne montrent des données?

C'est un comportement intentionnel. Après le chargement de la page, ou lorsque la page surveillée devient visible, Permon donnera à la page un peu de temps pour se stabiliser avant de calculer les mesures. Ainsi, réduisant les chances d'obtenir des pointes sauvages pour les FP et les métriques de latence à cadre.

Pourquoi Permon Monitor and Publish Statistiques ne se concentre-t-il pas dans la même fenêtre d'application?

Permon s'appuie sur le rappel de requestAnimationFrame pour déterminer si une trame sera rendue et pour déterminer quand c'est le bon moment pour faire du calcul des métriques. De cette façon, il minimise les frais généraux de performances qui sont en cours de surveillance. D'un autre côté, afin d'économiser des ressources, les navigateurs ont implémenté une optimisation, où le requestAnimationFrame n'est pas appelé pour les pages (onglets) qui ne sont pas visibles (minimisé, ou lorsqu'un autre onglet est au courant de la même fenêtre d'application). Pour cette raison, lorsqu'une page surveillée devient invisible, Permon est effectivement suspendu, jusqu'à ce qu'il redevienne visible.