permon

Permon

Um simples por forma de fórmula para aplicativos e jogos da web. Confira a seção de configuração e uso para obter a visão geral detalhada dos recursos.

Início rápido

Pacote (módulo)

 yarn add permon 

 import { Permon } from 'permon'

new Permon ( )

Baunilha

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

Bookmarklet

Você pode testar permon em qualquer página da Web que suporta os marcadores de marcadores, criando um novo marcador e preenchendo seu campo de endereço com o trecho de código abaixo. Como alternativa, você pode colar o mesmo trecho na barra de endereços do navegador. É importante que o snippet comece com 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 ) } ) ( ) ;

Observação

• Alguns navegadores removem automaticamente o javscript: texto, na pasta, como uma medida de segurança. Nesses casos, você deve escrevê -lo manualmente;

• Infelizmente, o Safari não suporta Bookmarklets desde o iOS 15.

Configuração e uso

Padrões

Por padrão, a Permon exibirá três painéis (FPS, Latência do quadro (MS = milissegundos) e JS Heap Memory (MB = Megabytes)) e atualizará cada painel uma vez a cada 250 ms.

 import { Permon } from 'permon'

new Permon ( )

Métricas

Você pode declarar explicitamente de quais métricas deseja acompanhar. Por exemplo, se você estiver interessado apenas em FPS, poderá fazer o seguinte.

 import { Permon } from 'permon'

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

Você também pode definir suas próprias métricas.

Uma métrica é feita de duas partes, a função "calculadora" que produz estatísticas e a interface do usuário ( opcional ) "painel".

A função "calculadora" é uma função simples que receberá um novo registro de data e hora em cada quadro de animação. Você pode usar esses timestamps para ajudá -lo a calcular as estatísticas desejadas.

O "painel" é um objeto que contém: * um elemento DOM que será anexado ao lado de outros painéis; * Uma função updateDom , que recebe as estatísticas produzidas pela calculadora e atualiza o elemento DOM para exibir as estatísticas.

As três métricas padrão que a Permon oferece, todas produzem as estatísticas que seguem a interface BasicStats (veja abaixo).

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

Um exemplo simples de captura de dados adicionais é determinar o tempo do cliente em que as outras estatísticas foram registradas. Para isso, ignoraremos o carimbo de hora, pois não é necessário para o cálculo e podemos assumir que a interface do usuário não é necessária.

 import { Permon } from 'permon'

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

Acesse os dados

A Permon pode publicar periodicamente as estatísticas coletadas para todas as métricas definidas. Você pode acessar esses dados usando o retorno de chamada onPublishStats ; e defina o atraso entre dois eventos de publicação.

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

Você pode usar esse mecanismo em combinação com a opção headless , para coletar e enviar periodicamente estatísticas de desempenho para algum serviço de agregação de dados. Esses dados podem ser processados ​​posteriormente e ajudá -lo a determinar como seu aplicativo realmente se comporta nos dispositivos de 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
} ) 

Q&A

Esta ferramenta parece ser semelhante a outros. O que esse traz para a mesa?

Permon, e seus painéis de interface do usuário foram inspirados por estatísticas e gamestats. A diferença é que a Permon é opinativa sobre como e quando mede o desempenho - enquanto permanece aberto para extensão. Você pode criar suas próprias métricas e/ou painéis. Você pode acessar as estatísticas e lidar com elas como desejar. Está escrito no TypeScript, que fornece uma melhor experiência de desenvolvimento para desenvolvedores e mantenedores.

Por que há um breve atraso antes dos painéis de latência FPS e Frame Latency mostrarem algum dado?

Este é um comportamento intencional. Depois que a página carrega, ou quando a página monitorada se tornar visível, a Permon dará à página algum tempo para se estabilizar antes de calcular as métricas. Assim, reduzindo a chance de obter picos selvagens para fps e métricas de latência de quadros.

Por que o Permon Monitor e publica estatísticas quando a página monitorada é minimizada ou quando a guia outro navegador é focada na mesma janela do aplicativo?

A Permon depende do retorno de chamada requestAnimationFrame para determinar se um quadro será renderizado e para determinar quando é um bom momento para fazer o cálculo das métricas. Dessa forma, minimiza a sobrecarga de desempenho que é CAUESD monitorando. Por outro lado, para economizar recursos, os navegadores implementaram uma otimização, onde o requestAnimationFrame não é chamado para as páginas (guias) que não são visíveis (minimizadas ou quando outra guia está no foco na mesma janela de aplicativos). Por esse motivo, quando uma página monitorada se torna invisível, a Permon é efetivamente suspensa, até que se torne visível novamente.