JQueryUI Dialog reuse with different params vs new (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

Setup

//create a dialog
    $('<div id="dialog1" />').dialog({
                    title: "Some title",
                    buttons: [
                    {
                        text: "button 1",
                        click: function() {return;}
                    },
                    {
                        text: "button 2",
                        click: function() {return;}
                    }
                    ],
    
                    closeOnEscape: false,
                    dialogClass: "utest-dialog",
                    minHeight: 150,
                    maxHeight: 600,
                    height: "auto",
                    minWidth: 150,
                    maxWidth: 800,
                    width: 300,
                    modal: true,
                    autoOpen: false
                });

Teardown


    $('.utest-dialog').remove();

Test runner

Ready to run.

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

$('#dialog1').dialog('options', {
                title: "Some other title",
                buttons: [
                {
                    text: "button 1.1",
                    click: function() {return;}
                },
                {
                    text: "button 1.2",
                    click: function() {return;}
                }
                ],

                closeOnEscape: false,
                dialogClass: "utest-dialog",
                minHeight: 150,
                maxHeight: 600,
                height: "auto",
                minWidth: 150,
                maxWidth: 800,
                width: 300,
                modal: true,
                autoOpen: false
});

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

$('#dialog1').dialog('options', {
                title: "Very long new and different title",
                buttons: [
                {
                    text: "some long button text",
                    click: function() {return;}
                },
                {
                    text: "long button text 2",
                    click: function() {return;}
                },
                {
                    text: "long button text 3",
                    click: function() {return;}
                }
                ],

                closeOnEscape: false,
                dialogClass: "utest-dialog",
                minHeight: 200,
                maxHeight: 650,
                height: 350,
                minWidth: 200,
                maxWidth: 700,
                width: 500,
                modal: true,
                autoOpen: false
});

$('#dialog1').dialog('open');
ready
Create new
$('<div><div><div style="font-size: 20pt;">Some html goes here</div></div></div>').dialog({
                title: "Some other title",
                buttons: [
                {
                    text: "button 1.1",
                    click: function() {return;}
                },
                {
                    text: "button 1.2",
                    click: function() {return;}
                }
                ],

                closeOnEscape: false,
                dialogClass: "utest-dialog",
                minHeight: 150,
                maxHeight: 600,
                height: "auto",
                minWidth: 150,
                maxWidth: 800,
                width: 300,
                modal: true,
                autoOpen: true
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.