jQuery VS jQ.Mobi VS zepto VS ten.js

JavaScript performance comparison

Revision 95 of this test case created by Kevin

Info

This is an edited test from http://jsperf.com/jqm3/68 by levin, which is based on some other test.

All I did was add a test for ten.js and remove the native JavaScript tests.

Preparation code

<script src="//zeptojs.com/zepto.min.js"></script>
<script src="//cdn.jqmobi.com/jq.mobi.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://lordsnow.net/kvf/ten/ten.min.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.appendChild(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 (; 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 (; 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 (; 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 (; i < 100; i += 1) {
  li = Zepto("<li>hello world Zepto</li>");
  Zepto(ul).append(li);
}
Zepto(d.id('container')).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:

8 comments

bill commented : ∞

Apples and oranges man ;)

Good start on ten.js, but all the other "constructor" calls for jQuery, Zepto and jqMobi allow you to do much more. The logic inside makes it slower. Since you aren't checking for DOM nodes, arrays, ten.js objects, it should be significantly faster then the others.

Kevin commented : ∞

Thanks,

Yeah that's kind of the point. There's a lot of jQuery that I'm not too interested in, and would rather keep it as small as possible. However much more functionality is in development, it's only existed for 5 days.

Kevin commented : ∞

Also - the HTML manipulation methods do check for arrays, even .html (jQuery doesn't even do that).

bill commented : ∞

im talking about the general selector. There is a lot ten.js doesnt supper that the other libraries do, so a comparrison isnt really usefull. its not a drop in replacement for any of the apis.

There are a few other libraries coming out that are way faster that do not provide a similar api to jquery. not sure what the goal is since you want help writing a "css selecor engine" when browsers do most of it for you now. Sizzle is good for backwards compatibility in old browsers and the fake selectors jQuery made. Why not just let te browser do the work?

you should look into not being compatible with those libraries and just build for speed! most users do not use all the variable types for the functions/selectors with those libraries. Its easier to support your own instead of trying to match the exising libraries that already have a strong base and greater coverage. good work so far though.

Kevin commented : ∞

Right, it's not a drop-in replacement, just a minimalist version of something familiar.

I actually didn't even know about querySelector, I figured there must be some function like that but wasn't sure. Anyway, I found that and implemented it, and it's running faster now (and smaller).

What are the other APIs you mentioned? Would be curious to check them out.

bill commented : ∞

Not to be rude, but go read jQuery's documentation ( much better then Zepto or jqMobi) and look at the source code too. Then decide if its a path you want to go down. Its a good way to learn how the low level code works, but its clear you do not have a broad understanding of how the libraris work. Thats why i said apples and oranges. The tests on here are to show api compatible libraries. While Zepto and jqMobi are not 100% perfect they are very close and work great for modern browsers. Adding features like "arrays" as parameters is not really helpful to anyone who knows those libraries since you left major parts out. Thats why I recommended going another route since you are trying to compare yourself against these libraries but offer an extremely small subset of overall functionality. Its not just additonal api calls, its supporting the same parameters that the other libraries do. You are bettrr off taking the wrapped dom tests on here and going from there as trn.js doesnt offer a real useable improvement.

Kevin commented : ∞

Apples and oranges are fine with me, but I need something to test the performance against. That's what this is for. Like I said, it has only existed for a few days, I need to get the basics working before moving on. Performance of simple functions is my primary concern at the moment. You can't expect it to have jQuery level functionality in a few days.

bill commented : ∞

Beating a dead horse but its obvious you do not understand what the libraries do. Who cares yours is only days old. If you want to try to beat the big frameworks you need to be faster, smaller and match what they do. You would have been better off creating your own test case instead of editing an existing one for everyone to see.

Add a comment