permon

เพอร์ซอน

Mon Itor Formance Mon สำหรับเว็บและเกม ชำระเงินส่วนการกำหนดค่าและการใช้งานสำหรับภาพรวมโดยละเอียดของคุณสมบัติ

เริ่มต้นอย่างรวดเร็ว

แพ็คเกจ (โมดูล)

 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: ข้อความบนวางเป็นมาตรการความปลอดภัย ในกรณีเช่นนี้คุณต้องเขียนด้วยมือ

• น่าเสียดายที่ Safari ไม่สนับสนุนบุ๊คมาร์คเล็ตตั้งแต่ iOS 15

การกำหนดค่าและการใช้งาน

ค่าเริ่มต้น

โดยค่าเริ่มต้น 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 มีความเห็นเกี่ยวกับวิธีการและเวลาที่วัดประสิทธิภาพ - ในขณะที่ยังคงเปิดอยู่สำหรับการขยาย คุณสามารถสร้างตัวชี้วัดและ/หรือแผงควบคุมของคุณเอง คุณสามารถเข้าถึงสถิติและจัดการได้ตามที่คุณต้องการ มันเขียนด้วย TypeScript ซึ่งให้ประสบการณ์การพัฒนาที่ดีขึ้นสำหรับนักพัฒนาและผู้ดูแล

เหตุใดจึงมีความล่าช้าสั้น ๆ ก่อนที่ FPS และแผง Frame Latency จะแสดงข้อมูลใด ๆ

นี่คือพฤติกรรมโดยเจตนา หลังจากโหลดหน้าเว็บหรือเมื่อมองเห็นหน้าตรวจสอบ Permon จะให้เวลากับหน้าในการรักษาเสถียรภาพก่อนที่จะคำนวณตัวชี้วัด ดังนั้นการลดโอกาสในการได้รับ spikes ป่าสำหรับ FPS และตัวชี้วัดความล่าช้าของเฟรม

เหตุใด PERMON MONITOR และเผยแพร่สถิติเมื่อหน้าตรวจสอบจะถูกย่อให้เล็กสุดหรือเมื่อแท็บเบราว์เซอร์อื่นได้รับการเน้นในหน้าต่างแอพเดียวกัน

Permon ขึ้นอยู่กับการโทรกลับของ requestAnimationFrame เพื่อพิจารณาว่าเฟรมจะแสดงผลหรือไม่และเพื่อพิจารณาว่าจะเป็นเวลาที่ดีในการคำนวณตัวชี้วัดหรือไม่ วิธีนี้จะช่วยลดประสิทธิภาพการทำงานที่ CAUESD โดยการตรวจสอบ ในทางกลับกันเพื่อประหยัดทรัพยากรเบราว์เซอร์ได้ดำเนินการเพิ่มประสิทธิภาพโดยที่ requestAnimationFrame ไม่ได้รับการเรียกสำหรับหน้า (แท็บ) ที่ไม่สามารถมองเห็นได้ (ย่อเล็กสุดหรือเมื่อแท็บอื่นอยู่ในโฟกัสที่หน้าต่างแอปพลิเคชันเดียวกัน) ด้วยเหตุนี้เมื่อหน้าตรวจสอบไม่สามารถมองเห็นได้ Permon จะถูกระงับอย่างมีประสิทธิภาพจนกว่าจะปรากฏให้เห็นอีกครั้ง