Table of Contents

1. a simple tool to help you see where time is spent in your application 1. one liner (or two, or …) 2. text 3. tags

a simple tool to help you see where time is spent in your application

one liner (or two, or …)

a small facility for instrumenting (javascript) code and graphically displaying the results

naive, hierarchical, manual code instrumentation routines, with optional d3-based graphing of performance results

allows you to simply (hopefully) instrument your code and then graphically display performance results

text

with perfobars, you (mentally) divide your code into "modules" (maybe at the level of individual source files? that, anyway, is what i do), each module creates a perfobars instance

perfobars = new Perfobars("mymodule.js");

and then brackets a process (section of code) with perfobars.begin("processname") and perfobars.end("processname"), where processname is arbitrary (but the same in the end as in the matching begin).

...

perfobars.begin("long task");

a_long_task_routine();

perfobars.begin("not so long a task");

do_something();

perfobars.end("not so long a task");

more_long_processing();

something_short();

perfobars.end("long task");

...

think of perfobars.begin() and perfobars.end() as being left and right parentheses, "named" for the unit of text (or, really, "processing") they bracket.

1. displaying the results

   if your .html file includes a <div> (say) with an id of perfobars-display:

   <div id="perfobars-display" class="container-fluid">
   </div>

   perfobars will generate a button in the rendered HTML to display a simple bar chart of the results (as well as a button to reset the counters – for another run, say – and another button that removes the chart from the page). the display can also be triggered programmatically (perfobars.display()).

   an example of such a bar chart is here.

   the begin and end calls can be arbitrarily nested, or can overlap. but, an error message will be returned if not all begins have a matching end. (also, if there is no element in the .html file with an id of perfobars-display, no report will be displayed.)

   also, if your web page has access to saveSvgAsPng (which perfobars attempts to import via a dynamic import("save-svg-as-png")), a fourth button will appear, allowing you to save the chart as a .png.

tags

performance monitoring instrumentation display chart