Does reusing a jQueryUI Dialog make a difference?

For my first blog post (ever) I am going to talk about a small performance test we did to determine whether reusing a pre-created jQueryUI dialog component is really any better than creating a new instance each time we want to display a modal dialog.  For a dynamic, single page, JavaScript powered application such as the one we are building now, these sort of things do matter (more on our stack in future posts).

The setup (before each test run):

Pre-create a jQueryUI dialog with id “dialog1″, and autoOpen option set to false, so that it starts out hidden.

$('<div id="dialog1" />').dialog({
     ...
     autoOpen: false
});

1) Reuse the pre-created dialog, but passing in new html

$('#dialog1').html('<div><div style="font-size: 20pt;">Some html goes here</div></div>');
$('#dialog1').dialog('open');

2) Reuse the pre-created jQueryUI dialog, passing in new html, but changing most of the dialog options, such as its title, buttons, height and width

This will be the most common scenario for us since we would be reusing one dialog component for any sort of modal interaction our application might need throughout a user session.

$('#dialog1').html('<div><div style="font-size: 20pt;">Some html goes here</div></div>');
$('#dialog1').dialog('options', {
     ... see link below for full details, basically changed many options ...
});
$('#dialog1').dialog('open');

3) Create a completely new jQueryUI dialog

$('<div><div><div style="font-size: 20pt;">Some html goes here</div></div></div>').dialog({
    ...
    autoOpen: true
});

The results:

You can see the full code and results on the jsPerf.com test case page

Performance Results

As it turns out, it is ~9000 times faster to reuse a jQueryUI dialog that was previously created rather than creating one each time.  It doesn’t matter much if the options and contents are completely different from the previous use.  This was an even bigger difference than we anticipated, so now we know (and you know too) to reuse jQueryUI dialogs.

P.S. Thanks to uTest and Fumi for providing a space for our engineers to share these sorts of observations!

2 Responses to “Does reusing a jQueryUI Dialog make a difference?”

  1. Jon-Erik said:

    Wow – that’s much higher than I would have expected. Do you find jsPerf to be a very useful tool?

  2. Michael said:

    @Jon-Erik: Well, truth be told, I only found out about it recently. It worked great for this test case, but I am not sure how easy it will be to isolate real application code into small self-contained test cases such as this one. We’ll see!

Leave a Reply

Spam Protection by WP-SpamFree