https://github.com/localvoid/perf-monitor

Performance monitor. Simple UI component that helps you measure performance.
https://github.com/localvoid/perf-monitor

browser performance

Last synced: 3 months ago
JSON representation

Performance monitor. Simple UI component that helps you measure performance.

• Host: GitHub
• URL: https://github.com/localvoid/perf-monitor
• Owner: localvoid
• License: mit
• Created: 2016-04-29T10:21:22.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-03-06T10:45:38.000Z (over 1 year ago)
• Last Synced: 2024-05-11T01:02:39.536Z (6 months ago)
• Topics: browser, performance
• Language: TypeScript
• Homepage:
• Size: 39.1 KB
• Stars: 128
• Watchers: 5
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Performance Monitor

## API

### `perf-monitor` module.

```ts

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;

```

### `perf-monitor/component`

```ts

class PerfMonitor extends HTMLElement {

  observe(name: string, bucket: Bucket): void;

}

```

#### `` Attributes

- `fps` - enables FPS monitor

- `mem` - enables Mem monitor [`performance.memory`](https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory)

## Example

```html

  perf-monitor example

  

  

    import {

      ema, emaPush,

    } from "https://cdn.jsdelivr.net/npm/[email protected]/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();

  

  

```

## Enabling High-Resolution Timers with Better Precision

- https://developer.chrome.com/blog/cross-origin-isolated-hr-timers/

- https://web.dev/coop-coep/

Install HTTP server that supports custom headers, e.g. [serve](https://npmjs.com/package/serve).

```sh

npm -g install serve

```

Add COEP and COOP headers to `serve.json` config.

```json

{

  "headers": [

    {

      "source": "**/*.html",

      "headers": [

        {

          "key": "Cross-Origin-Embedder-Policy",

          "value": "require-corp"

        },

        {

          "key": "Cross-Origin-Opener-Policy",

          "value": "same-origin"

        }

      ]

    }

  ]

}

```

Start HTTP server.

```sh

serve

```