Tiny javascript performances inspector
To contribute to the project, read the Contribution guidelines. After that, you can create your own Pull Requests (PR) and submit them here.
Copy the perfslite.js file into your project and include it in your HTML page. You can use it at anytime on your web page.
PerfsLite works with instances. The goal is to produce a series of logs that generate a listing of the analyzed performances. At the end, you can see what are the longest pieces of code and how many times they were called.
To do that, start by creating an instance inside your code giving it a name (like at the beginning of a button click event):
PerfsLite.start('button');Now a new instance is listening your future logs. You can get it with PerfsLite.instance('button').
Create a new log at the beginning of a piece of code then stop it at the end to get stats.
var log = PerfsLite.log('button', 'change a color');
// ... your tested code
log.stop();
// You can get the last log created with PerfsLite.lastLog() method.At the end of your tests, call the result to generate the performances details with:
PerfsLite.result('button');When you're calling the result, PerfsLite gives you these details:
======= PERFS: button =======
*** TIMES ***
> loop new color (calls: 3, average: 0.4 sec, total: 1.2 sec)
> change a color (calls: 1, average: 1.2 sec, total: 1.2 sec)
*** STACK ***
> change a color (start: 0.1 sec, time: 1.3 sec)
> loop new color (start: 0.1 sec, time: 0.3 sec)
> loop new color (start: 0.4 sec, time: 0.4 sec)
> loop new color (start: 0.8 sec, time: 0.5 sec)
*** TOTAL ***
1.3 sec
TIMES is all of your logs sorted from more called to least. You can see the number of calls, the average time for each call and the total duration of all calls.
STACK is the part where you can find all of the logs called in the right order. So you can see the whole process of your instance, step by step.
TOTAL is the total duration of your instance.