permon
v1.2.2
Webアプリやゲームの単純なフォーマンスMon 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 )
} ) ( )新しいブックマークを作成し、アドレスフィールドを下にコードスニペットで埋めることにより、ブックマークレットをサポートするWebページで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:テキスト、ペースト上のテキストを自動的に削除します。そのような場合、手作業で書く必要があります。残念ながら、SafariはiOS 15以降のブックマークレットをサポートしていません。
デフォルトでは、Permonは3つのパネル（FPS、フレームレイテンシ（MS =ミリ秒）、JSヒープメモリ（MB =メガバイト）を表示し、250ミリ秒ごとに各パネルを1回更新します。
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」の2つの部分で構成されています。
「計算機」関数は、各アニメーションフレームに新しいタイムスタンプを受信する単純な関数です。これらのタイムスタンプを使用して、必要な統計を計算するのに役立ちます。
「パネル」は、次のものを含むオブジェクトです。 *他のパネルの横に追加されるDOM要素。 *計算機によって作成された統計を受信し、dom要素を更新して統計を表示するupdateDom機能。
Permonが提供する3つのデフォルトメトリックは、すべて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 ,
} ,
} ,
} )追加のデータをキャプチャする簡単な例の1つは、他の統計が記録されたときのクライアントの時間を決定することです。このためには、計算には必要ではないため、タイムスタンプは無視し、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コールバックを使用して、このデータにアクセスできます。 2つの公開イベント間の遅延を定義します。
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はメトリックを計算する前にページに安定する時間を与えます。したがって、FPSとフレームレイテンシメトリックのために野生のスパイクを取得する可能性を減らします。
監視されたページが最小化されたとき、または別のブラウザタブが同じアプリウィンドウに焦点を合わせたときに、Permon監視および公開されないのはなぜですか？
Permonは、 requestAnimationFrameコールバックに依存して、フレームがレンダリングされるかどうかを判断し、メトリックの計算を行うのに適した時期を判断します。これにより、監視することでCauesdであるパフォーマンスオーバーヘッドを最小限に抑えます。一方、リソースを保存するために、ブラウザは最適化を実装しました。この場合、 requestAnimationFrameは表示されないページ（タブ）に呼び出されません（最小化されていない、または別のタブが同じアプリケーションウィンドウに焦点を合わせている場合）。このため、監視されたページが見えなくなると、Permonが再び表示されるまで効果的に吊り下げられます。
