permon
v1.2.2
对于Web应用程序和游戏，每个ITOR的简单效果。查看配置和使用部分，以详细概述该功能。
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:文本，粘贴，作为安全措施。在这种情况下，您必须手工写它；不幸的是，自iOS 15以来，Safari不支持书签。
默认情况下，Permon将显示三个面板（FPS，帧延迟（MS =毫秒）和JS Heap内存（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 ( ) ,
} ,
} ,
} )您还可以定义自己的指标。
度量由两个部分组成，即产生统计数据的“计算器”函数，以及（可选）“面板” UI。
“计算器”功能是一个简单的函数，将在每个动画框架上接收新的时间戳。您可以使用这些时间戳来帮助您计算所需的任何统计数据。
“面板”是一个包含： *将在其他面板旁边附加的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 ,
} ,
} ,
} )捕获其他数据的一个简单示例是确定记录其他统计数据时客户的时间。为此，我们将忽略时间戳，因为计算不需要，我们可以假设不需要UI。
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
} ) 该工具似乎与其他工具相似。这是什么带到桌子上的？
Permon及其UI面板的灵感来自Stats.js和GameStats。不同之处在于，佩尔（Permon）在衡量性能的方式和何时何时被认为是开放的，以进行扩展。您可以创建自己的指标和/或面板。您可以根据需要访问统计数据并处理它们。它用打字稿编写，为开发人员和维护人员提供更好的开发体验。
为什么在FPS和Frame Latency面板显示任何数据之前会有短暂的延迟？
这是故意的行为。页面加载或可见的监视页面后，Permon将在计算指标之前给出一些时间稳定的时间。因此，减少了FP和框架延迟指标获得野生尖峰的机会。
当监视页面最小化时，或者当另一个浏览器选项卡聚焦在同一应用程序窗口中时，为什么Permon Monitor并发布统计信息？
Permon依靠requestAnimationFrame回调来确定是否会渲染帧，并确定何时是进行指标计算的好时机。这样，它可以通过监视来最大程度地减少性能开销。另一方面，为了节省资源，浏览器已实现了优化，在该优化中，请求requestAnimationFrame未被要求使用不可见的页面（TABS）（最小化，或者当另一个选项卡放在同一应用程序窗口上的另一个选项卡时）。因此，当监视的页面变得不可见时，Permon被有效悬挂，直到再次可见为止。
