# rafmeter

> A minimally invasive raf/fps meter

Latest version **0.2.1** (published 2017-03-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install rafmeter
pnpm add rafmeter
yarn add rafmeter
bun add rafmeter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2017-03-02 |
| First published | 2017-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Cristi Ingineru |
| Maintainers | cristi.ingineru |
| Keywords | raf, fps, benchmarking, requestAnimationFrame |

## Links

- npm: https://www.npmjs.com/package/rafmeter
- Repository: https://github.com/cristiingineru/rafmeter
- Homepage: https://github.com/cristiingineru/rafmeter#readme
- Issues: https://github.com/cristiingineru/rafmeter/issues
- npm.io page: https://npm.io/package/rafmeter

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.2.1 (latest) — 2017-03-02
- 0.2.0 — 2017-03-01
- 0.1.1 — 2017-02-21
- 0.1.0 — 2017-02-19

## README

# About
A minimally invasive raf/fps meter.


# How it works
A requestAnimationFrame is scheduled to run as fast as possible and the time between two such calls is measured and stored in a short buffer. From time to time the mean duration is calculated and displayed at the top of the page.

In case the application being benchmarked is scheduling its own requestAnimationFrame(s) then there is no need to change them or merge with the instrumentation code because the browser will run all them.


# Setup
Just add this line to the page:
```html
<script type="text/javascript" src="rafmeter.js" ></script>
```

# Examples
https://rawgit.com/cristiingineru/rafmeter/master/test1.html
https://rawgit.com/cristiingineru/rafmeter/master/test2.html
https://rawgit.com/cristiingineru/rafmeter/master/test3.html


# Impact on performance
The instrumentation is taking up to 0.25 ms which for an ideally fluent page running at 60 fps means 1.5%. The slower the page the smaller the impact of the instrumentation.
![alt text](timeline.png)


# Bulk
Lots of pages to be benchmarked? Add instrumentation to all of them with [rafmeter-injector](https://github.com/cristiingineru/rafmeter-injector)

---
_Source: https://npm.io/package/rafmeter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._