jQuery 2.0b VS jQ.Mobi VS zepto VS ten.js VS Angular jqLite vs BSI vs Vanilla JS

JavaScript performance comparison

Revision 164 of this test case created

Info

Added the BSI framework test along with native JS

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
<script src="//zeptojs.com/zepto.min.js">
</script>
<script src="//cdn.jqmobi.com/jq.mobi.min.js">
</script>
<script src="//code.jquery.com/jquery-2.0.2.js">
</script>
<script src="//lordsnow.net/kvf/ten/ten.min.js">
</script>
<script src="//cdn.app-framework-software.intel.com/2.0/appframework.min.js">
</script>
<script src="//bytes1.dyndns.org/BSI/website-app.js"></script>
<div id="container">
</div>
<script>
Benchmark.prototype.setup = function() {
    var d = {};
    d.id = function(el) {
      return document.getElementById(el);
    }
    d.create = function(el) {
      return document.createElement(el);
    }
   
    //Lets add the append method to all html dom nodes:
    HTMLElement.prototype.append = function(el) {
      this.innerHTML(el);
    }
    var container = d.id('container');
    var ul, li, i = 0;
};

Benchmark.prototype.teardown = function() {
    container.innerHTML = "";
};
</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
jQ.Mobi
ul = jq("<ul/>");
for (var i = 0; i < 100; i += 1) {
  li = jq("<li>hello world jq.Mobi</li>");
  ul.append(li);
}
jq(d.id('container')).append(ul);
pending…
jQuery
ul = jQuery("<ul/>");
for (var i = 0; i < 100; i += 1) {
  li = jQuery("<li>hello world jQuery</li>");
  ul.append(li);
}
jQuery(d.id('container')).append(ul);
pending…
ten.js
ul = ten("<ul/>");
for (var i = 0; i < 100; i += 1) {
  li = ten("<li>hello world ten.js</li>");
  ul.append(li);
}
ten(d.id('container')).append(ul);
pending…
Zepto
ul = Zepto("<ul/>");
for (var i = 0; i < 100; i += 1) {
  li = Zepto("<li>hello world Zepto</li>");
  Zepto(ul).append(li);
}
Zepto(d.id('container')).append(ul);
pending…
Angular jqLite
ul = angular.element("<ul/>");
for (var i = 0; i < 100; i += 1) {
  li = angular.element("<li>hello world Angular</li>");
  ul.append(li);
}
angular.element(d.id('container')).append(ul);
pending…
Intel App Framework
ul = $("<ul/>");
for (var i = 0; i < 100; i += 1) {
  li = $("<li>hello world jQuery</li>");
  ul.append(li);
}
$(d.id('container')).append(ul);
pending…
BSI framework
ul = BSI.makeNode("ul");
for (; i < 100; i += 1) {
  li = BSI.util.makeDOMFragment("<li>hello world</li>");
  ul.append(li);
}
BSI.Node(container).append(ul);
pending…
Native JS
i, ul = document.createElement("ul");
for (; i < 100; i += 1) {
  li = document.createElement("li");
  li.innerText = 'hello world raw JS';
  ul.appendChild(li);
}
document.getElementById("container").appendChild(ul);
pending…
Slow native
ul = document.createDocumentFragment('ul');
var nestedLi;
for(var i = 0; i<100; i += 1){
nestedLi = ul.appendChild(document.createElement("li"));
nestedLi.innerText="hello world";
};

document.getElementById("container").appendChild(ul);
pending…
Native html string
i, ul = '<ul>';
for (; i < 100; i += 1) {
  ul += '<li>hello world</li>';
}

ul += '</ul>';
document.getElementById("container").innerHTML = 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