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被有效懸掛，直到再次可見為止。
