jQ.Mobi VS zepto

JavaScript performance comparison

Revision 92 of this test case created by

Preparation code

<script src="https://zeptojs.com/zepto.min.js"></script>
<script src="https://cdn.jqmobi.com/jq.mobi.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var activeNodes = [];
var backgroundColor = '#000';
var clock = null;
var offColor = '#333';
var onColor = '#fff';
var runAlways = null;
var runOnce = null;

// http://xkcd.com/1123/
function evenThymeIsJustHydrogenAndTime (indices)
{
    // console.log('indices', indices);
    var hourRow = indices[0];
    var row = $('#WordClock *:nth-child(' + hourRow + ')');
    var hourLeft = indices[1];
    var hourRight = hourLeft + indices[2];
    for (var i = hourLeft; i < hourRight; i++)
    {
        var child = row.children("*:nth-child(" + i + ")");
        activeNodes.push(child);
        child.css('color', onColor);
        child.addClass("on");
    }
}

function clickJackAllTheThings (e)
{
    var link = $(e.currentTarget);

    var newBackgroundColor = link.css('background-color');
    if ( newBackgroundColor ) backgroundColor = newBackgroundColor;

    var newOffColor = link.data('off-color');
    if ( newOffColor ) offColor = newOffColor;

    // var newOnColor = link.data('on-color');
    var newOnColor = link.css('color');
    if ( newOnColor ) onColor = newOnColor;

    clock.css({
       'background-color': backgroundColor,
       'color': offColor
    });

    // update the highlighted nodes
    for (var n = 0; n < activeNodes.length; n++)
    {
        activeNodes[n].css('color', onColor);
    }
}

function setCurrentTime ()
{
    //establish what the time is
    var currentTime = new Date();
    var hour = currentTime.getHours() - 1;
    if(hour == -1){ hour = 11; }
    var minute = currentTime.getMinutes();
    var ampm = "am";
    if(hour > 11){
        ampm = "pm";
        hour = hour-12;
    }
    if(hour == 11){
        ampm = "pm";
    }

    // un-highlight prior active nodes
    for (var n = 0; n < activeNodes.length; n++)
    {
        activeNodes[n].css('color', offColor);
        activeNodes[n].removeClass("on");
    }

    // highlight the hour
    evenThymeIsJustHydrogenAndTime(hours[hour]);

    // highlight the minute's ones
    var minTen = Math.floor(minute / 10);
    var minOne = (minute % 10);

    // handle tens and teens in a special manner
    // 10, 11, and 12 => treated as extra "ones", with no "tens"
    // 13+ => treated as extra "ones", includes the "ten"
    if ( minTen == 1 )
    {
        minTen = (minOne < 3 ? 0 : 1);
        minOne += 10;
    }

    // highlight the minute's "ones"
    // if an even multiple of 10 minutes, skip the "ones"
    if ( ! (minTen && minOne == 0) )
    {
        evenThymeIsJustHydrogenAndTime(minOnes[minOne]);
    }

    // highlight the minute's "tens"
    // handle 10, 11, 12 in a special manner (see above)
    if ( minOne < 10 || minOne > 12 )
    {
        evenThymeIsJustHydrogenAndTime(minTens[minTen]);
    }

    // this method has been run once before
    // assume we're at the "top of the minute" now
    // clear the one-time interval and setup the per-minute interval
    if ( runOnce )
    {
        // clear the one-time interval
        clearInterval(runOnce)
        // set the interval to run every minute
        runAlways = setInterval(setCurrentTime, 60000);
    }
    // run this function again at the top of the minute
    // but only do this ONCE!
    else
    {
        var currentTime = new Date();
        var second = currentTime.getSeconds();
        nextInterval = Math.max((60 - second), 1);
        runOnce = setInterval(setCurrentTime, (nextInterval * 1000));
    }
}


/*
Link-lists below define grid positions for the various words on the clock
*/

var hours = [
  // row, left, len
  [ 1, 1, 3 ], // one
  [ 2, 1, 3 ], // two
  [ 1, 4, 5 ], // three
  [ 2, 4, 4 ], // four
  [ 1, 9, 4 ], // five
  [ 3, 1, 3 ], // six
  [ 2, 8, 5 ], // seven
  [ 3, 4, 5 ], // eight
  [ 3, 9, 4 ], // nine
  [ 5, 1, 3 ], // ten
  [ 4, 1, 6 ], // eleven
  [ 4, 7, 6 ]  // twelve
];

var minTens = [
    // row, left, len
    [  8, 6, 1 ], // o
    [ 12, 8, 5 ], // -teen
    [  6, 1, 6 ], // twenty
    [  7, 1, 6 ], // thirty
    [  7, 8, 5 ], // forty
    [  8, 1, 5 ] // fifty
];

var minOnes = [
  // row, left, len
  [  8, 7, 6 ], // ’clock
  [  9, 1, 3 ], // one
  [ 10, 1, 3 ], // two
  [  9, 4, 5 ], // three
  [ 10, 4, 4 ], // four
  [  9, 9, 4 ], // five
  [ 11, 1, 3 ], // six
  [ 10, 8, 5 ], // seven
  [ 11, 4, 5 ], // eight
  [ 11, 9, 4 ], // nine


  [ 5, 10, 3 ], // ten
  [ 12, 1, 6 ], // eleven
  [  6, 7, 6 ],  // twelve

  [  7, 1, 5 ], // thirteen
  [ 10, 4, 4 ], // fourteen
  [  8, 1, 3 ], // fifteen
  [ 11, 1, 3 ], // sixteen
  [ 10, 8, 5 ], // seventeen
  [ 11, 4, 5 ], // eighteen
  [ 11, 9, 4 ] // nineteen
];
</script>

    <article id="WordClock">
        <section>
            <div>O</div>
            <div>N</div>
            <div>E</div>
            <div>T</div>
            <div>H</div>
            <div>R</div>
            <div>E</div>
            <div>E</div>
            <div>F</div>
            <div>I</div>
            <div>V</div>
            <div>E</div>
        </section>
        <section>
            <div>T</div>
            <div>W</div>
            <div>O</div>
            <div>F</div>
            <div>O</div>
            <div>U</div>
            <div>R</div>
            <div>S</div>
            <div>E</div>
            <div>V</div>
            <div>E</div>
            <div>N</div>
        </section>
        <section>
            <div>S</div>
            <div>I</div>
            <div>X</div>
            <div>E</div>
            <div>I</div>
            <div>G</div>
            <div>H</div>
            <div>T</div>
            <div>N</div>
            <div>I</div>
            <div>N</div>
            <div>E</div>
        </section>
        <section>
            <div>E</div>
            <div>L</div>
            <div>E</div>
            <div>V</div>
            <div>E</div>
            <div>N</div>
            <div>T</div>
            <div>W</div>
            <div>E</div>
            <div>L</div>
            <div>V</div>
            <div>E</div>
        </section>
        <section>
            <div>T</div>
            <div>E</div>
            <div>N</div>
            <div>T</div>
            <div>E</div>
            <div>E</div>
            <div>L</div>
            <div>F</div>
            <div>M</div>
            <div>T</div>
            <div>E</div>
            <div>N</div>
        </section>
        <section>
            <div>T</div>
            <div>W</div>
            <div>E</div>
            <div>N</div>
            <div>T</div>
            <div>Y</div>
            <div>T</div>
            <div>W</div>
            <div>E</div>
            <div>L</div>
            <div>V</div>
            <div>E</div>
        </section>
        <section>
            <div>T</div>
            <div>H</div>
            <div>I</div>
            <div>R</div>
            <div>T</div>
            <div>Y</div>
            <div>Z</div>
            <div>F</div>
            <div>O</div>
            <div>R</div>
            <div>T</div>
            <div>Y</div>
        </section>
        <section>
            <div>F</div>
            <div>I</div>
            <div>F</div>
            <div>T</div>
            <div>Y</div>
            <div>O</div>
            <div></div>
            <div>C</div>
            <div>L</div>
            <div>O</div>
            <div>C</div>
            <div>K</div>
        </section>
        <section>
            <div>O</div>
            <div>N</div>
            <div>E</div>
            <div>T</div>
            <div>H</div>
            <div>R</div>
            <div>E</div>
            <div>E</div>
            <div>F</div>
            <div>I</div>
            <div>V</div>
            <div>E</div>
        </section>
        <section>
            <div>T</div>
            <div>W</div>
            <div>O</div>
            <div>F</div>
            <div>O</div>
            <div>U</div>
            <div>R</div>
            <div>S</div>
            <div>E</div>
            <div>V</div>
            <div>E</div>
            <div>N</div>
        </section>
        <section>
            <div>S</div>
            <div>I</div>
            <div>X</div>
            <div>E</div>
            <div>I</div>
            <div>G</div>
            <div>H</div>
            <div>T</div>
            <div>N</div>
            <div>I</div>
            <div>N</div>
            <div>E</div>
        </section>
        <section>
            <div>E</div>
            <div>L</div>
            <div>E</div>
            <div>V</div>
            <div>E</div>
            <div>N</div>
            <div>X</div>
            <div></div>
            <div>T</div>
            <div>E</div>
            <div>E</div>
            <div>N</div>
        </section>
    </article>

      
<script>
Benchmark.prototype.setup = function() {
  activeNodes = [];
  backgroundColor = '#000';
  offColor = '#333';
  onColor = '#fff';
  runOnce = null;
  

};

Benchmark.prototype.teardown = function() {
  clearInterval(runAlways);
  for (var n = 0; n < activeNodes.length; n++)
  {
      activeNodes[n].css('color', offColor);
      activeNodes[n].removeClass("on");
  }
  

};
</script>

Preparation code output

<article id="WordClock"> <section> <div>O</div> <div>N</div> <div>E</div> <div>T</div> <div>H</div> <div>R</div> <div>E</div> <div>E</div> <div>F</div> <div>I</div> <div>V</div> <div>E</div> </section> <section> <div>T</div> <div>W</div> <div>O</div> <div>F</div> <div>O</div> <div>U</div> <div>R</div> <div>S</div> <div>E</div> <div>V</div> <div>E</div> <div>N</div> </section> <section> <div>S</div> <div>I</div> <div>X</div> <div>E</div> <div>I</div> <div>G</div> <div>H</div> <div>T</div> <div>N</div> <div>I</div> <div>N</div> <div>E</div> </section> <section> <div>E</div> <div>L</div> <div>E</div> <div>V</div> <div>E</div> <div>N</div> <div>T</div> <div>W</div> <div>E</div> <div>L</div> <div>V</div> <div>E</div> </section> <section> <div>T</div> <div>E</div> <div>N</div> <div>T</div> <div>E</div> <div>E</div> <div>L</div> <div>F</div> <div>M</div> <div>T</div> <div>E</div> <div>N</div> </section> <section> <div>T</div> <div>W</div> <div>E</div> <div>N</div> <div>T</div> <div>Y</div> <div>T</div> <div>W</div> <div>E</div> <div>L</div> <div>V</div> <div>E</div> </section> <section> <div>T</div> <div>H</div> <div>I</div> <div>R</div> <div>T</div> <div>Y</div> <div>Z</div> <div>F</div> <div>O</div> <div>R</div> <div>T</div> <div>Y</div> </section> <section> <div>F</div> <div>I</div> <div>F</div> <div>T</div> <div>Y</div> <div>O</div> <div>’</div> <div>C</div> <div>L</div> <div>O</div> <div>C</div> <div>K</div> </section> <section> <div>O</div> <div>N</div> <div>E</div> <div>T</div> <div>H</div> <div>R</div> <div>E</div> <div>E</div> <div>F</div> <div>I</div> <div>V</div> <div>E</div> </section> <section> <div>T</div> <div>W</div> <div>O</div> <div>F</div> <div>O</div> <div>U</div> <div>R</div> <div>S</div> <div>E</div> <div>V</div> <div>E</div> <div>N</div> </section> <section> <div>S</div> <div>I</div> <div>X</div> <div>E</div> <div>I</div> <div>G</div> <div>H</div> <div>T</div> <div>N</div> <div>I</div> <div>N</div> <div>E</div> </section> <section> <div>E</div> <div>L</div> <div>E</div> <div>V</div> <div>E</div> <div>N</div> <div>X</div> <div>—</div> <div>T</div> <div>E</div> <div>E</div> <div>N</div> </section> </article>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
jQ.Mobi
clock = $('#WordClock');
setCurrentTime();
pending…
jQuery
clock = $('#WordClock');
setCurrentTime();
pending…
Zepto
clock = $('#WordClock');
setCurrentTime();
pending…
Raw JS - Building DOM nodes
clock = $('#WordClock');
setCurrentTime();
pending…
some jQuery style, native performance with prototypes
clock = $('#WordClock');
setCurrentTime();
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.

0 Comments

O
N
E
T
H
R
E
E
F
I
V
E
T
W
O
F
O
U
R
S
E
V
E
N
S
I
X
E
I
G
H
T
N
I
N
E
E
L
E
V
E
N
T
W
E
L
V
E
T
E
N
T
E
E
L
F
M
T
E
N
T
W
E
N
T
Y
T
W
E
L
V
E
T
H
I
R
T
Y
Z
F
O
R
T
Y
F
I
F
T
Y
O
C
L
O
C
K
O
N
E
T
H
R
E
E
F
I
V
E
T
W
O
F
O
U
R
S
E
V
E
N
S
I
X
E
I
G
H
T
N
I
N
E
E
L
E
V
E
N
X
T
E
E
N