Constructing selects

JavaScript performance comparison

Test case created by Joshua Conner

Info

Comparing constructing selects with jQuery with constructing select as a string to pass to jQuery.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
Benchmark.prototype.setup = function() {
    var aspectRatios = {
      Product: [640, 480],
      Ad: [320, 200],
      Banner: [300, 100],
      Thumb: [125, 125],
      Square: [300, 300]
    }
};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery
var $select2 = $('<select />');

var aspectRatio;
for (aspectRatio in aspectRatios) {
  $select2.append('<option value="' + aspectRatio + '">' + aspectRatio + '</option>');
}

$select2.appendTo('body');
pending…
string concatenation
var selectString = '<select>';

var aspectRatio;
for (aspectRatio in aspectRatios) {
  selectString += '<option value="' + aspectRatio + '">' + aspectRatio + '</option>';
}

var $select1 = $(selectString + '</select>');
$select1.appendTo('body');
pending…

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

Compare results of other browsers

0 comments

Add a comment