type Bucket = ExponentialMovingAverage;
/**
* Exponential Moving Average.
*
* The EMA is a moving average that places a greater weight and significance on
* the most recent data points.
*
* {@link https://www.investopedia.com/terms/e/ema.asp}
*/
interface ExponentialMovingAverage {
readonly type: "ema";
readonly alpha: number;
avg: number;
std: number;
var: number;
min: number;
}
// Creates an exponential moving average bucket.
function ema(alpha: number = 1 / 60): ExponentialMovingAverage;
// Adds a sample to an exponential moving average bucket.
function emaPush(ema: ExponentialMovingAverage, value: number): void;
class PerfMonitor extends HTMLElement {
observe(name: string, bucket: Bucket): void;
}
fps
- enables FPS monitormem
- enables Mem monitorperformance.memory
<!doctype html>
<html>
<head>
<title>perf-monitor example</title>
<script src="https://cdn.jsdelivr.net/npm/perf-monitor@0.6.0/dist/component.js" type="module"></script>
<script type="module">
import {
ema, emaPush,
} from "https://cdn.jsdelivr.net/npm/perf-monitor@0.6.0/dist/index.js";
const testEMA = ema();
document.querySelector("perf-monitor").observe("test", testEMA);
function tick() {
let t0 = performance.now();
for (let i = 0; i < 100000; i++) {
Math.random();
}
emaPush(testEMA, performance.now() - t0);
setTimeout(tick, 30);
}
tick();
</script>
</head>
<body>
<perf-monitor fps mem></perf-monitor>
</body>
</html>
Install HTTP server that supports custom headers, e.g. serve.
npm -g install serve
Add COEP and COOP headers to serve.json
config.
{
"headers": [
{
"source": "**/*.html",
"headers": [
{
"key": "Cross-Origin-Embedder-Policy",
"value": "require-corp"
},
{
"key": "Cross-Origin-Opener-Policy",
"value": "same-origin"
}
]
}
]
}
Start HTTP server.
serve