So I've written a library that allows me to drop in performance timing relatively unobtrusively.
Book nowModern Universal React with Next.js
Stop worrying about configuration, and complex codebases: Next.js makes SSR with React easy. Book your masterclass today.
Essentially this only creating timers where you ask it to. However, the key difference from the usual start/stop function is that you can just point the library at a function and it will time it when it's executed.
time.report() time.report(label) time.setReportMethod(function) time.setLineReportMethod(function)
Calling time.report() will show the complete report. If a label is passed in, it will show reports for only that label.
The setter functions allow you to output the reports in your own way, i.e. if you want the output in Firebug's console, or added to a floating DIV you have created. See the performance test example for a working example.
time.start(label) time.stop(label) time.func([label], function) time.event([label], element/s, event type)
The start and stop must have the same label to tie up the timer.
This can time both static functions or anonymous function. This is where the ease of adding timing comes in.
The key to timing functions, is that the function reference is passed back from time.func() - so you can wrap anonymous function with the timer or you can point event hooks to time static functions.
Time a pre-assigned event on an element. If the event hasn't been assigned yet, the time will not be able to attach to anything.
The event timer also supports attaching to multiple elements at once.
I've created a little bookmarklet to fire the report whenever you want and a jQuery plugin for the event timer:
jQuery plugin: time (note that you still need to include the time.js library)