permon
v1.2.2
웹 앱 및 게임에 대한 간단한 포지션 만 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:Text, Paste의 텍스트를 자동으로 제거합니다. 그러한 경우, 당신은 그것을 손으로 써야합니다.불행히도 Safari는 iOS 15 이후 책갈피를 지원하지 않습니다.
기본적으로 Permon은 3 개의 패널 (FPS, 프레임 대기 시간 (MS = 밀리 초) 및 JS 힙 메모리 (MB = Megabytes))를 표시하고 250ms마다 한 번씩 각 패널을 업데이트합니다.
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 요소; * 계산기가 생성 한 통계를 수신하고 DOM 요소를 업데이트하여 통계를 표시하는 updateDom 기능.
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이 성능을 측정하는 방법과시기에 대해 의견을 제시하는 반면 확장을 위해 열려 있습니다. 자신의 메트릭 및/또는 패널을 만들 수 있습니다. 통계에 액세스하고 원하는대로 처리 할 수 있습니다. TypeScript로 작성되어 개발자와 관리자에게 더 나은 개발 경험을 제공합니다.
FPS 와 Frame Latency 패널이 데이터를 보여주기 전에 간단한 지연이있는 이유는 무엇입니까?
이것은 의도적 인 행동입니다. 페이지로드 후 또는 모니터링 된 페이지가 표시되면 Permon은 메트릭을 계산하기 전에 페이지에 안정화 할 시간을 제공합니다. 따라서 FPS 및 프레임 대기 시간 메트릭에 대한 야생 스파이크를 얻을 가능성을 줄입니다.
모니터링 된 페이지가 최소화되거나 다른 브라우저 탭이 동일한 앱 창에 집중 될 때 Permon 모니터 및 게시 통계가없는 이유는 무엇입니까?
Permon은 FREME가 렌더링 될지 확인하고 메트릭 계산을 수행하기에 좋은시기를 결정하기 위해 requestAnimationFrame 콜백에 의존합니다. 이렇게하면 모니터링을 통해 CAUESD의 성능 오버 헤드를 최소화합니다. 반면에, 리소스를 저장하기 위해 브라우저는 최적화를 구현했으며, requestAnimationFrame 이 표시되지 않은 페이지 (최소화 또는 다른 탭이 동일한 응용 프로그램 창에 초점을 맞추는 경우)를 요구하지 않는 최적화를 구현했습니다. 이로 인해 모니터링 된 페이지가 보이지 않게되면 Permon은 다시 볼 때까지 효과적으로 매달됩니다.
