One Keystroke to Speedy Code

Earlier this year, we focused on top feature requests like layers, better printing and copying of styles. But as developers, when we add features or even fix bugs, we sometimes also inadvertently SLOOOOOWWWW down our code over time.

This is a developer-centric article about a technique we’ve developed to profile any piece of javascript code in the browser with a keystroke.

Profiling

How do you fix slow code? Do you pore over all 300,000 lines in your local code repo and hope to find a nasty for loop that iterates over all of the atoms in the universe?

Nope. You use a profiler.

In a sentence, a profiler is a tool that stopwatches every function call in your program, and allows you to sort by the the functions that use the most time. You can then localize the biggest offenders and try to come up with solutions.

Screen Shot 2015-09-23 at 3.24.39 PM

Most robust development environments have a profiler, and Google Chrome is no exception. For the young programmers out there, I highly recommend learning how to profile, it is relatively easy to learn, and an impressive bullet point for your resume!

Starting and stopping a profile

We found that dragging a group of many shapes can drop the frame rate in Gliffy significantly.

This was our first pass at diagnosing the problem:

  1. Build a diagram with 100 simple shapes
  2. Select All
  3. Hit the “record profile” button in Chrome Developer Tools
  4. Go back to the main window and wildly drag around the shapes
  5. Hit the “stop profile” button in Chrome Developer Tools

The major problem was that there were several seconds of downtime before and after our expensive operation of wildly dragging shapes all over the place.

And all of that downtime confuses results! You absolutely need to localize your performance woes to the exact operation that’s causing your poor framerate.

Instrumenting your code

Modern browsers support profiling from code. So instead of a 2000+ millisecond operation of hitting the record key and stop key, you can add console.profile and console.profileEnd to areas of code that you suspect to be slow:

function superSlowOperation(){
  console.profile('mySuperCoolProfile')
  ...
  lotsOfReallySlowStuff();
  ...
  console.profileEnd();
}

One Key Press

I always recommend instrumenting code as shown in the previous section, but what if you want to profile any operation at any time?

This little piece of javascript will help you do it

var DO_PROFILE = true; 
//on any key down
window.addEventListener( "keydown", function(event){ 
 if (DO_PROFILE){
   console.profile(); //start the profile
   DO_PROFILE = false;
 }
}, false );
//on any key up
window.addEventListener( "keyup", function(event){ 
 console.profileEnd(); //end the profile 
 DO_PROFILE = true;
}, false );

This code starts and stops a profile on any keypress. You could also put the profile operation on a specific key by polling the keycode of the event if you’d like.

While supported by major browsers, console.profile should not be used in production. Recording the time of every function call adds lots of overhead!

Enter Snippets

For development, I have been evangelizing Chrome snippets amongst my peers. They are the bomb and they are way too hidden.

Snippets are little chunks of code that can run within the context of your javascript application. They work just like writing code on the console, but with a full editing environment for multiple lines of code.

In Chrome developer tools, click the sources tab. In the left pane just to the right of content scripts, you should see “snippets”.  Right click on that blank pane and select “new”. Finally name the snippet and paste the profiling code above into that pane.

Animated-gif-for-Rocco's-blog

When you’re ready to run your code, click the play button in the right hand panel (above the call stack and watch). In the case above you’ll be simply adding some global key handlers.

Putting it all together

Once you have run your snippet and the key handlers are bound, you can:

  1. Hold down the <shift> key on your keyboard (or any key)
  2. Do your expensive operation (in our case dragging around a group of shapes)
  3. Release the <shift> key

Then you can go the profiles tab in your developer tools and get a wealth of information about the slowest parts of your code.

With our flowchart, BPMN and UML tools, Gliffy hopes to help you write the quickest of code. But if you mess up, there’s always the profiler!