jQuery Sizzle vs Create Element

JavaScript performance comparison

Test case created by kozo yamagata

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="result"></div>
<script>
Benchmark.prototype.setup = function() {
    window.$result = $('#result');
};

Benchmark.prototype.teardown = function() {
    window.$result = undefined;
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
using sizzle
var $ul = $('<ul></ul>');
$.each(['apple', 'banana', 'melon'], function(i, fruit) {
  var $li = $('<li></li>').text(fruit);
  $ul.append($li);
});

window.$result.append($ul);
pending…
using document.createElement
var $ul = $(document.createElement('ul'));
$.each(['apple', 'banana', 'melon'], function(i, fruit) {
  var $li = $(document.createElement('li')).text(fruit);
  $ul.append($li);
});

window.$result.append($ul);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment