ten.js performance test

Benchmark created by Kevin on

Description

Some redundant code.

Preparation HTML

<script src="http://lordsnow.net/kvf/ten/ten.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://cdn.jqmobi.com/1.11/jq.mobi.min.js">
</script>
<script src="http://zeptojs.com/zepto.min.js">
</script>
<div id="container">
</div>

Setup

var i = 0,
        passes = 10,
        ul, li;

Teardown


    document.getElementById("container").innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
ten.js
(function($) {
  ul = $("<ul/>");
  for (; i < passes; i++) {
    li = $("<li>hello world</li>");
    ul.append(li);
  }
  $("#container").append(ul);
  $("#container>ul").find("li").each(function(index, element) {
    var elem = element.html(index + ": list item");
    !elem.hasClass("list-item") && elem.addClass("list-item");
    $.on("click", "#container>ul>li", function(e) {
      // click handler
    });
    $.off("click","#container>ul>li");
  });
})(ten);
ready
jQuery
(function($) {
  ul = $("<ul/>");
  for (; i < passes; i++) {
    li = $("<li>hello world</li>");
    ul.append(li);
  }
  $("#container").append(ul);
  $("#container>ul").find("li").each(function(index, element) {
    var elem = $(element).html(index + ": list item");
    !elem.hasClass("list-item") && elem.addClass("list-item");
    $(document).on("click", "#container>ul>li", function(e) {
      // click handler
    });
    $(document).off("click","#container>ul>li");
  });
})(jQuery);
ready
jqMobi
(function($) {
  ul = $("<ul/>");
  for (; i < passes; i++) {
    li = $("<li>hello world</li>");
    ul.append(li);
  }
  $("#container").append(ul);
  $("#container>ul").find("li").each(function(index, element) {
    var elem = $(element).html(index + ": list item");
    !elem.hasClass("list-item") && elem.addClass("list-item");
    $(document).on("click", "#container>ul>li", function(e) {
      // click handler
    });
    $(document).off("click","#container>ul>li");
  });
})(jq);
ready
Zepto
(function($) {
  ul = $("<ul/>");
  for (; i < passes; i++) {
    li = $("<li>hello world</li>");
    ul.append(li);
  }
  $("#container").append(ul);
  $("#container>ul").find("li").each(function(index, element) {
    var elem = $(element).html(index + ": list item");
    !elem.hasClass("list-item") && elem.addClass("list-item");
    $(document).on("click", "#container>ul>li", function(e) {
      // click handler
    });
    $(document).off("click","#container>ul>li");
  });
})(Zepto);
ready

Revisions

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

  • Revision 1: published by Kevin on
  • Revision 2: published by Kevin on
  • Revision 7: published by Kevin on
  • Revision 9: published by Kevin on