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

Revision 164 of this benchmark created on

Description

Added the BSI framework test along with native JS

Preparation HTML

<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>

Setup

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;

Teardown


    container.innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/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);
ready
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);
ready
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);
ready
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);
ready
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);
ready
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);
ready
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);
ready
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);
ready
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);
ready
Native html string
i, ul = '<ul>';
for (; i < 100; i += 1) {
  ul += '<li>hello world</li>';
}

ul += '</ul>';
document.getElementById("container").innerHTML = ul;
ready

Revisions

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