Working on a complex UI which sometimes freeze? jsHiccup might be handy!
This is a proof of concept aiming to reproduce within a browser what jHiccup provides inside a JVM.
Go check out this live demo and then generate hiccup graphs with HdrHistogram log analyzer
Note: jsHiccup measures are in micro seconds when displayed in the log analyzer UI
jsHiccup is split in two parts:
- a web-worker script, jshiccup.worker.js, in charge of recording hiccup measures in an histogram
- a client script, jshiccup.recorder.js, which runs a timer to detect and measure hiccup times and send them to the web-worker
Both files can be downloaded directly or using npm/yarn.
Using npm you can get these files with the following command:
npm i jshiccup
Note for TypeScript developers: since jsHiccup has been written in TypeScript, definition files are embedded, no additional task is needed to get them.
js files are also available from github's release page:
<script src="https://alexvictoor.github.io/jsHiccup/jshiccup.recorder.js" />
Once you have grabbed the two scripts, you can start instrumenting your application with the following code fragment:
const worker = new Worker("jshiccup.worker.js"); let buffer = ""; // buffer will hold the hdr logs const logAppender = (line) => buffer += (line + "\r\n"); // you can do something more complex // such as pushing the logs to a server const recorder = new jsHiccup.default(worker, logAppender); recorder.start();