{"id":20767789,"url":"https://github.com/dmnsgn/raf-perf","last_synced_at":"2025-04-14T21:14:23.916Z","repository":{"id":52997292,"uuid":"165032109","full_name":"dmnsgn/raf-perf","owner":"dmnsgn","description":"RAF loop with an adaptive fps and performance ratio calculated from either a sample count or a sample duration. Typically used when doing intensive graphics computation in canvas.","archived":false,"fork":false,"pushed_at":"2024-07-06T14:23:38.000Z","size":2852,"stargazers_count":62,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-14T21:14:17.481Z","etag":null,"topics":["adaptive","fps","loop","performance","raf","requestanimationframe","throttle","tick","ticker"],"latest_commit_sha":null,"homepage":"https://dmnsgn.github.io/raf-perf/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmnsgn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-10T09:37:37.000Z","updated_at":"2025-01-05T21:27:15.000Z","dependencies_parsed_at":"2024-11-18T01:35:17.053Z","dependency_job_id":null,"html_url":"https://github.com/dmnsgn/raf-perf","commit_stats":{"total_commits":12,"total_committers":1,"mean_commits":12.0,"dds":0.0,"last_synced_commit":"76bc2b8df3f85a57654a3c6a7507a358700e4dda"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmnsgn%2Fraf-perf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmnsgn%2Fraf-perf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmnsgn%2Fraf-perf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmnsgn%2Fraf-perf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmnsgn","download_url":"https://codeload.github.com/dmnsgn/raf-perf/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248961238,"owners_count":21189993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adaptive","fps","loop","performance","raf","requestanimationframe","throttle","tick","ticker"],"created_at":"2024-11-17T11:33:25.504Z","updated_at":"2025-04-14T21:14:23.897Z","avatar_url":"https://github.com/dmnsgn.png","language":"JavaScript","funding_links":["https://paypal.me/dmnsgn"],"categories":[],"sub_categories":[],"readme":"# raf-perf\n\n[![npm version](https://img.shields.io/npm/v/raf-perf)](https://www.npmjs.com/package/raf-perf)\n[![stability-stable](https://img.shields.io/badge/stability-stable-green.svg)](https://www.npmjs.com/package/raf-perf)\n[![npm minzipped size](https://img.shields.io/bundlephobia/minzip/raf-perf)](https://bundlephobia.com/package/raf-perf)\n[![dependencies](https://img.shields.io/librariesio/release/npm/raf-perf)](https://github.com/dmnsgn/raf-perf/blob/main/package.json)\n[![types](https://img.shields.io/npm/types/raf-perf)](https://github.com/microsoft/TypeScript)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-fa6673.svg)](https://conventionalcommits.org)\n[![styled with prettier](https://img.shields.io/badge/styled_with-Prettier-f8bc45.svg?logo=prettier)](https://github.com/prettier/prettier)\n[![linted with eslint](https://img.shields.io/badge/linted_with-ES_Lint-4B32C3.svg?logo=eslint)](https://github.com/eslint/eslint)\n[![license](https://img.shields.io/github/license/dmnsgn/raf-perf)](https://github.com/dmnsgn/raf-perf/blob/main/LICENSE.md)\n\nRAF loop with an adaptive fps and performance ratio calculated from either a sample count or a sample duration. Typically used when doing intensive graphics computation in canvas.\n\n[![paypal](https://img.shields.io/badge/donate-paypal-informational?logo=paypal)](https://paypal.me/dmnsgn)\n[![coinbase](https://img.shields.io/badge/donate-coinbase-informational?logo=coinbase)](https://commerce.coinbase.com/checkout/56cbdf28-e323-48d8-9c98-7019e72c97f3)\n[![twitter](https://img.shields.io/twitter/follow/dmnsgn?style=social)](https://twitter.com/dmnsgn)\n\n![](https://raw.githubusercontent.com/dmnsgn/raf-perf/main/screenshot.gif)\n\n## Installation\n\n```bash\nnpm install raf-perf\n```\n\n## Usage\n\n```js\nimport RafPerf from \"raf-perf\";\nimport createCanvasContext from \"canvas-context\";\n\nconst { context, canvas } = createCanvasContext(\"2d\", {\n  width: window.innerWidth,\n  height: window.innerHeight,\n  offscreen: true,\n});\ndocument.body.appendChild(canvas);\n\nconst engine = new RafPerf();\n\nconst offTick = engine.on(\"tick\", (dt) =\u003e {\n  // Clear\n  context.clearRect(0, 0, canvas.width, canvas.height);\n\n  // Draw\n  // ...\n});\n\nconst offPerf = engine.on(\"perf\", (ratio) =\u003e {\n  if (!ratio) return;\n\n  console.log(`Performance ratio: ${ratio}`);\n\n  if (ratio \u003c 0.9) {\n    console.log(\"Too many draws\");\n  } else if (ratio \u003e= 0.9 \u0026\u0026 rectCount \u003c maxRectCount) {\n    console.log(\"Draw more\");\n  }\n});\n\nengine.start();\n\nconst destroy = () =\u003e {\n  if (engine.isRunning) engine.stop();\n  offTick();\n  offPerf();\n};\n```\n\n## API\n\n\u003c!-- api-start --\u003e\n\n## Classes\n\n\u003cdl\u003e\n\u003cdt\u003e\u003ca href=\"#RafPerf\"\u003eRafPerf\u003c/a\u003e\u003c/dt\u003e\n\u003cdd\u003e\u003c/dd\u003e\n\u003c/dl\u003e\n\n## Events\n\n\u003cdl\u003e\n\u003cdt\u003e\u003ca href=\"#event_perf\"\u003e\"perf\"\u003c/a\u003e\u003c/dt\u003e\n\u003cdd\u003e\u003cp\u003eEvent triggered when performance ratio (\u003ccode\u003ethis.frameDuration / averageDeltaTime\u003c/code\u003e) is updated. Understand a ratio of the fps, for instance for a fps value of 24, \u003ccode\u003eratio \u0026lt; 0.5\u003c/code\u003e means that the averaged \u003ccode\u003efps \u0026lt; 12\u003c/code\u003e and you should probably do something about it.\u003c/p\u003e\n\u003c/dd\u003e\n\u003cdt\u003e\u003ca href=\"#event_tick\"\u003e\"tick\"\u003c/a\u003e\u003c/dt\u003e\n\u003cdd\u003e\u003cp\u003eEvent triggered on tick, throttled by \u003ccode\u003eoptions.fps\u003c/code\u003e.\u003c/p\u003e\n\u003c/dd\u003e\n\u003c/dl\u003e\n\n## Typedefs\n\n\u003cdl\u003e\n\u003cdt\u003e\u003ca href=\"#Options\"\u003eOptions\u003c/a\u003e : \u003ccode\u003eobject\u003c/code\u003e\u003c/dt\u003e\n\u003cdd\u003e\u003c/dd\u003e\n\u003cdt\u003e\u003ca href=\"#OptionsPerformances\"\u003eOptionsPerformances\u003c/a\u003e : \u003ccode\u003eobject\u003c/code\u003e\u003c/dt\u003e\n\u003cdd\u003e\u003c/dd\u003e\n\u003c/dl\u003e\n\n\u003ca name=\"RafPerf\"\u003e\u003c/a\u003e\n\n## RafPerf\n\n**Kind**: global class\n\n- [RafPerf](#RafPerf)\n  - [new RafPerf([options])](#new_RafPerf_new)\n  - [.TickEvent](#RafPerf+TickEvent) : \u003ccode\u003estring\u003c/code\u003e\n  - [.PerfEvent](#RafPerf+PerfEvent) : \u003ccode\u003estring\u003c/code\u003e\n  - [.start()](#RafPerf+start)\n  - [.tick()](#RafPerf+tick)\n  - [.stop()](#RafPerf+stop)\n  - [.on(type, cb)](#RafPerf+on) ⇒ \u003ccode\u003efunction\u003c/code\u003e\n\n\u003ca name=\"new_RafPerf_new\"\u003e\u003c/a\u003e\n\n### new RafPerf([options])\n\nCreates an instance of RafPerf.\n\n| Param     | Type                             | Default         | Description                                                                                                                                                         |\n| --------- | -------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [options] | [\u003ccode\u003eOptions\u003c/code\u003e](#Options) | \u003ccode\u003e{}\u003c/code\u003e | `samplesCount` and `sampleDuration` are used concurrently. Set `sampleDuration` to a _falsy_ value if you only want to sample performances from a number of frames. |\n\n\u003ca name=\"RafPerf+TickEvent\"\u003e\u003c/a\u003e\n\n### rafPerf.TickEvent : \u003ccode\u003estring\u003c/code\u003e\n\n**Kind**: instance property of [\u003ccode\u003eRafPerf\u003c/code\u003e](#RafPerf)\n\u003ca name=\"RafPerf+PerfEvent\"\u003e\u003c/a\u003e\n\n### rafPerf.PerfEvent : \u003ccode\u003estring\u003c/code\u003e\n\n**Kind**: instance property of [\u003ccode\u003eRafPerf\u003c/code\u003e](#RafPerf)\n\u003ca name=\"RafPerf+start\"\u003e\u003c/a\u003e\n\n### rafPerf.start()\n\nRun the `requestAnimationFrame` loop and start checking performances if `options.performances.enabled` is `true`.\n\n**Kind**: instance method of [\u003ccode\u003eRafPerf\u003c/code\u003e](#RafPerf)\n\u003ca name=\"RafPerf+tick\"\u003e\u003c/a\u003e\n\n### rafPerf.tick()\n\nThe frame loop callback.\n\n**Kind**: instance method of [\u003ccode\u003eRafPerf\u003c/code\u003e](#RafPerf)\n**Emits**: \u003ccode\u003eRafPerf.event:PerfEvent\u003c/code\u003e, \u003ccode\u003eRafPerf.event:TickEvent\u003c/code\u003e\n\u003ca name=\"RafPerf+stop\"\u003e\u003c/a\u003e\n\n### rafPerf.stop()\n\nRun `cancelAnimationFrame` if necessary and reset the engine.\n\n**Kind**: instance method of [\u003ccode\u003eRafPerf\u003c/code\u003e](#RafPerf)\n\u003ca name=\"RafPerf+on\"\u003e\u003c/a\u003e\n\n### rafPerf.on(type, cb) ⇒ \u003ccode\u003efunction\u003c/code\u003e\n\nAdd \"perf\" and \"tick\" listeners.\n\n**Kind**: instance method of [\u003ccode\u003eRafPerf\u003c/code\u003e](#RafPerf)\n**Returns**: \u003ccode\u003efunction\u003c/code\u003e - Call the return value to unsubscribe.\n\n| Param | Type                  |\n| ----- | --------------------- |\n| type  | \u003ccode\u003estring\u003c/code\u003e   |\n| cb    | \u003ccode\u003efunction\u003c/code\u003e |\n\n\u003ca name=\"event_perf\"\u003e\u003c/a\u003e\n\n## \"perf\"\n\nEvent triggered when performance ratio (`this.frameDuration / averageDeltaTime`) is updated. Understand a ratio of the fps, for instance for a fps value of 24, `ratio \u003c 0.5` means that the averaged `fps \u003c 12` and you should probably do something about it.\n\n**Kind**: event emitted\n\u003ca name=\"event_tick\"\u003e\u003c/a\u003e\n\n## \"tick\"\n\nEvent triggered on tick, throttled by `options.fps`.\n\n**Kind**: event emitted\n\u003ca name=\"Options\"\u003e\u003c/a\u003e\n\n## Options : \u003ccode\u003eobject\u003c/code\u003e\n\n**Kind**: global typedef\n**Properties**\n\n| Name           | Type                                                     | Default                                                                 | Description           |\n| -------------- | -------------------------------------------------------- | ----------------------------------------------------------------------- | --------------------- |\n| [fps]          | \u003ccode\u003enumber\u003c/code\u003e                                      | \u003ccode\u003e60\u003c/code\u003e                                                         | Throttle fps.         |\n| [performances] | [\u003ccode\u003eOptionsPerformances\u003c/code\u003e](#OptionsPerformances) | \u003ccode\u003e{ enabled: true, samplesCount: 200, sampleDuration: 4000 }\u003c/code\u003e | Performances metrics. |\n\n\u003ca name=\"OptionsPerformances\"\u003e\u003c/a\u003e\n\n## OptionsPerformances : \u003ccode\u003eobject\u003c/code\u003e\n\n**Kind**: global typedef\n**Properties**\n\n| Name             | Type                 | Default           | Description                                  |\n| ---------------- | -------------------- | ----------------- | -------------------------------------------- |\n| [enabled]        | \u003ccode\u003eboolean\u003c/code\u003e | \u003ccode\u003etrue\u003c/code\u003e | Evaluate performances.                       |\n| [samplesCount]   | \u003ccode\u003enumber\u003c/code\u003e  | \u003ccode\u003e200\u003c/code\u003e  | Number of samples to evaluate performances.  |\n| [sampleDuration] | \u003ccode\u003enumber\u003c/code\u003e  | \u003ccode\u003e4000\u003c/code\u003e | Duration of sample to evaluate performances. |\n\n\u003c!-- api-end --\u003e\n\n## License\n\nMIT. See [license file](https://github.com/dmnsgn/raf-perf/blob/main/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmnsgn%2Fraf-perf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmnsgn%2Fraf-perf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmnsgn%2Fraf-perf/lists"}