jQuery vs Zepto vs VanillaJS

JavaScript performance comparison

Revision 4 of this test case created

Preparation code

<script src="//code.jquery.com/jquery-1.8.1.min.js">
</script>
<script>
  jQuery.noConflict();
</script>
<script src="http://zeptojs.com/zepto.min.js">
</script>
<div id="idSelector">
</div>
<div class="classSelector">
</div>
<ul id="iteration">
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
  <li>
  </li>
</ul>
<div id="cssGetter" style="color: black;">
</div>
<div id="cssSetter" style="color: black;">
</div>
<div id="find">
  <span>
  </span>
  <div>
    <strong>
    </strong>
  </div>
</div>
<script>
Benchmark.prototype.setup = function() {
    var container = document.createElement('div');
    container.id = 'testContainer';
    document.body.appendChild(container);
};

Benchmark.prototype.teardown = function() {
    var testContainer = document.getElementById('#testContainer');
    document.body.removeChild(testContainer);
};
</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
jQuery Element Creation
var jq1 = jQuery('<ul></ul>');


for (var i = 0; i < 100; i++) {
  var jq2 = jQuery('<li>Hello World!</li>');
  jq1.append(jq2);
}

jQuery(container).append(jq1);
pending…
Zepto Element Creation
var z1 = Zepto('<ul></ul>');


for (var i = 0; i < 100; i++) {
  var z2 = Zepto('<li>Hello World!</li>');
  z1.append(z2);
}

Zepto(container).append(z1);
pending…
Vanilla Element Creation
var list = document.createElement('ul');

for (var i = 0; i < 100; i++) {
  var li = document.createElement('li');
  list.appendChild(li);
}

container.appendChild(list);
pending…
jQuery Tag Search
jQuery('#pageContainer').find('li')
pending…
Zepto Tag Search
Zepto('#pageContainer').find('li');
pending…
Vanilla Tag Search
document.getElementById('#pageContainer').getElementsByTagName('li');
pending…
jQuery Children Search
jQuery('#find div').find('strong');
pending…
Zepto Children Search
Zepto('#find div').find('strong');
pending…
Vanilla Children Search
var findContainer = document.getElementById('find');
var div = findContainer.getElementsByTagName('div');
div[0].querySelectorAll(':root strong');
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