permon

permon

Monor per fasilitas sederhana untuk aplikasi web dan game. Periksa bagian konfigurasi dan penggunaan untuk ikhtisar terperinci dari fitur.

Awal yang cepat

Paket (modul)

 yarn add permon 

 import { Permon } from 'permon'

new Permon ( )

Vanila

 ( 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 )
} ) ( )

Bookmarklet

Anda dapat menguji permon di halaman web apa pun yang mendukung bookmarklets, dengan membuat bookmark baru dan mengisi bidang alamatnya dengan cuplikan kode di bawah ini. Atau Anda dapat menempelkan cuplikan yang sama di bilah alamat browser. Penting bahwa cuplikan dimulai dengan 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 ) } ) ( ) ;

Catatan

• Beberapa browser secara otomatis menghapus javscript: teks, pada pasta, sebagai tindakan keamanan. Dalam kasus seperti itu, Anda harus menulisnya dengan tangan;

• Sayangnya, Safari tidak mendukung bookmarklets sejak iOS 15.

Konfigurasi dan Penggunaan

Default

Secara default, Permon akan menampilkan tiga panel (FPS, latensi bingkai (MS = milidetik) dan memori heap JS (MB = megabytes)) dan memperbarui setiap panel sekali setiap 250 ms.

 import { Permon } from 'permon'

new Permon ( )

Metrik

Anda dapat secara eksplisit menyatakan metrik mana yang ingin Anda jejak. Misalnya, jika Anda hanya tertarik pada FPS, Anda dapat melakukan hal berikut.

 import { Permon } from 'permon'

new Permon ( {
  metrics : {
    fps : {
      calculator : Permon . UTILS . metrics . fps . createCalculator ( ) ,
      panel : Permon . UTILS . metrics . fps . createPanel ( ) ,
    } ,
  } ,
} )

Anda juga dapat menentukan metrik Anda sendiri.

Metrik terbuat dari dua bagian, fungsi "kalkulator" yang menghasilkan statistik, dan "panel" ( opsional ) UI.

Fungsi "kalkulator" adalah fungsi sederhana yang akan menerima cap waktu baru pada setiap bingkai animasi. Anda dapat menggunakan cap waktu ini untuk membantu Anda menghitung statistik apa pun yang Anda inginkan.

"Panel" adalah objek yang berisi: * elemen DOM yang akan ditambahkan di sebelah panel lain; * Fungsi updateDom , yang menerima statistik yang dihasilkan oleh kalkulator , dan memperbarui elemen DOM untuk menampilkan statistik.

Tiga metrik default yang ditawarkan Permon, semua menghasilkan statistik yang mengikuti antarmuka BasicStats (lihat di bawah).

 // 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 ,
    } ,
  } ,
} )

Salah satu contoh sederhana dari menangkap data tambahan adalah menentukan waktu klien ketika statistik lainnya dicatat. Untuk ini kita akan mengabaikan cap waktu, karena itu tidak diperlukan untuk perhitungan, dan kita dapat berasumsi bahwa UI tidak diperlukan.

 import { Permon } from 'permon'

new Permon ( {
  metrics : {
    ... Permon . UTILS . metrics . createAllDefaultMetrics ( ) , // This will create all the default metrics.
    clientTime : {
      calculator : ( ) => ( new Date ) . toISOString ( ) ,
    } ,
  } ,
} )

Mengakses data

Permon dapat secara berkala menerbitkan statistik yang dikumpulkan untuk semua metrik yang ditentukan. Anda dapat mengakses data ini dengan menggunakan panggilan balik onPublishStats ; dan tentukan keterlambatan antara dua acara penerbitan.

 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".
} )

Anda dapat menggunakan mekanisme ini dalam kombinasi dengan opsi headless , untuk secara berkala mengumpulkan dan mengirim statistik kinerja ke beberapa layanan agregasi data. Data ini kemudian dapat diproses dan membantu Anda menentukan bagaimana aplikasi Anda benar -benar berperilaku pada perangkat klien.

 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

Alat ini tampaknya mirip dengan yang lain. Apa yang dibawa ke meja ini?

Permon, dan panel UI -nya terinspirasi oleh stats.js dan gamestats. Perbedaannya adalah bahwa Permon memiliki pendapat tentang bagaimana dan kapan mengukur kinerja - sementara itu tetap terbuka untuk ekstensi. Anda dapat membuat metrik dan/atau panel Anda sendiri. Anda dapat mengakses statistik dan menanganinya sesuai keinginan. Ini ditulis dalam TypeScript, yang memberikan pengalaman pengembangan yang lebih baik bagi pengembang dan pengelola.

Mengapa ada penundaan singkat sebelum FPS dan panel Frame Latency menunjukkan data?

Ini adalah perilaku yang disengaja. Setelah halaman memuat, atau ketika halaman yang dipantau menjadi terlihat, Permon akan memberikan halaman waktu untuk stabil sebelum menghitung metrik. Dengan demikian, mengurangi kemungkinan mendapatkan paku liar untuk FP dan metrik latensi bingkai.

Mengapa Permon tidak memantau dan menerbitkan statistik ketika halaman yang dipantau diminimalkan, atau ketika tab browser lain difokuskan di jendela aplikasi yang sama?

Permon bergantung pada callback requestAnimationFrame untuk menentukan apakah bingkai akan diterjemahkan, dan untuk menentukan kapan saat yang tepat untuk melakukan perhitungan metrik. Dengan cara ini meminimalkan overhead kinerja yang cauesd dengan memantau. Di sisi lain, untuk menghemat sumber daya, browser telah mengimplementasikan optimasi, di mana requestAnimationFrame tidak dipanggil untuk halaman (tab) yang tidak terlihat (diminimalkan, atau ketika tab lain berada dalam fokus pada jendela aplikasi yang sama). Karena itu, ketika halaman yang dipantau menjadi tidak terlihat, Permon ditangguhkan secara efektif, sampai menjadi terlihat lagi.