JQueryUI Dialog reuse with different params vs new (v8)

Revision 8 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yuiloader/yuiloader-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js"></script>
<script src="//www.cinsoft.net/mylib099-min.js"></script>
<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.