70
GitHub - mobz/lag-radar: Trace frame rate lag with a sexy performance radar
source link: https://github.com/mobz/lag-radar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
LagRadar
It's a sexy little lag radar for demonstrating performance - or lack of.
Add this to any javascript application and you can see when the app drops below 60fps as the radar sweep changes colour and gets janky.
Usage
The radar is published as a zero dependency es6 javascript module.
import lagRadar from './lag-radar.js'; const destroy = lagRadar({ frames: 50, // number of frames to draw, more = worse performance speed: 0.0017, // how fast the sweep moves (rads per ms) size: 300, // outer frame px inset: 3, // circle inset px parent: document.body, // DOM node to attach to }); // later ... destroy();
It also exposes css class hooks for styling the radar
To run the demo
npm install
npm start
open http://localhost:9080/
Genesis
This version authored by @mobz with ideas and contributions from others for this talk by @dan_abramov and shared to the world with love.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK