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 на любой веб -странице, которая поддерживает Bookmarklets, создав новую закладку и заполняя его поле адреса при приведенной ниже фрагменте кода. В качестве альтернативы вы можете вставить тот же фрагмент в адресную строку браузера. Важно, чтобы фрагмент начинался с 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 не поддерживает Bookmarklets с момента iOS 15.

Конфигурация и использование

По умолчанию

По умолчанию IMMON отобразит три панели (FPS, задержка кадра (MS = миллисекунд) и память JS Heap (MB = мегабайты)) и обновлять каждую панель раз каждые 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 для отображения статистики.

Три показателя по умолчанию, которые предлагает IMPON, все создают статистику, которые следуют за интерфейсом 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 ( ) ,
    } ,
  } ,
} )

Получить доступ к данным

Пермон может периодически публиковать собранную статистику для всех определенных метрик. Вы можете получить доступ к этим данным, используя обратный вызов 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
} ) 

Q & A.

Этот инструмент, по -видимому, похож на других. Что это приносит на стол?

Пермон, и его панели пользовательского интерфейса были вдохновлены статизаторами и играми. Разница состоит в том, что Immon самоуверен в отношении того, как и когда он измеряет производительность - в то время как он остается открытым для расширения. Вы можете создавать свои собственные метрики и/или панели. Вы можете получить доступ к статистике и обрабатывать их так, как хотите. Он написан в TypeScript, который обеспечивает лучший опыт разработки для разработчиков и сопровождающих.

Почему существует небольшая задержка, прежде чем FPS и панели Frame Latency показывают какие -либо данные?

Это намеренное поведение. После того, как страница загружается, или когда отслеживаемая страница становится видимой, Пермон даст странице некоторое время для стабилизации перед расчетом метрик. Таким образом, снижение вероятности получения диких шипов для FPS и показателей задержки рамки.

Почему Mermon не мониционирует и не публикует статистику, когда страница мониторинга минимизируется, или когда другая вкладка браузера сосредоточена в одном и том же окне приложения?

Пермон полагается на обратный вызов requestAnimationFrame , чтобы определить, будет ли отображаться кадр, и определить, когда сейчас хорошее время для расчета метрик. Таким образом, это минимизирует накладные расходы на производительность, которая является CauESD путем мониторинга. С другой стороны, чтобы сохранить ресурсы, браузеры реализовали оптимизацию, где requestAnimationFrame не требуется на страницы (вкладки), которые не видны (сводя к минимуму или когда другая вкладка сосредоточена на одном и том же окне приложения). Из -за этого, когда контролируемая страница становится невидимой, пермон эффективно приостанавливается, пока она снова не станет видимой.