Time measurement in titanium using javascript

Question

I've created an application in titanium which creates 10000 buttons and adds them to a window. My goal is to measure the time of the whole creation process, so that I can compare it to other cross-platform solutions.

Now to my problem: All the buttons gets drawn out perfectly, but as the title says, the time measurement is way off, it takes around a minute when timing it with a real stopwatch, but when using the .getTime() comparision it gives me 0.02 minutes.

function renderButtons() {
    var win = Ti.UI.createWindow({
        backgroundColor: 'B8B8B8',
        exitOnClose: true,
        fullscreen: 'false',
        title: 'Label Demo'
    });

    win.open();
    var count = 0;
    var Pwidth = Ti.Platform.displayCaps.platformWidth;
    var Pheight = Ti.Platform.displayCaps.platformHeight;
    var widthRan = 0;
    var heightRan = 0;
    var left;
    var top;
    var color;
    var time = '0.0';
    var elapsed = '0.0';
    var start = '0.0';

    start = new Date().getTime();
    for (count = 0; count < 10000; count++) {
        left = Math.floor((Math.random()*Pwidth));
        top = Math.floor((Math.random()*Pheight));
        widthRan = Math.floor((Math.random()*100));
        heightRan = Math.floor((Math.random()*100));
        color = getRandomColor();
        var pixel = Ti.UI.createButton({
            center: { x:left, y:top },
            width: widthRan,
            height: heightRan,
            textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
            text: 'Back',
            color: 'white',
            backgroundColor: color
        });
        win.add(pixel);
    }

    elapsed = new Date().getTime();
    time = elapsed - start;
    var seconds = time/1000;
    var mins = seconds/60;
    win.close();
    alert(mins.toString());
}

Is my time measurement method way off, or could this be a titanium problem? It is very strange since it works perfectly for my matrix multiplication.

Answer 1

You are measuring time which is required to initialize 10000 button objects without drawing them on a screen. To calculate exact amount of time from starting application to moment when users see all buttons on a screen, you need to use event listener attached to window object.

Try something like to this:

function renderButtons() {
    var win = Ti.UI.createWindow({
        backgroundColor: 'B8B8B8',
        exitOnClose: true,
        fullscreen: 'false',
        title: 'Label Demo'
    });

    var start = new Date().getTime();
    for (var count = 0; count < 1000; count++) {
        win.add( createRandomButton() );
    }
    alert('init: ' + (new Date().getTime() - start));

    win.addEventListener('postlayout', function(){
        alert('postlayout: ' + (new Date().getTime() - start));
    });

    win.open();
}

If you need to close window immediately after rendering is done add win.close() in eventListener to prevent calling it in the middle of drawing it on a screen:

win.addEventListener('postlayout', function(){
    alert('postlayout: ' + (new Date().getTime() - start));
    win.close();
});

Answer 2

You are showing time in alert alert(time.toString()); It will not give you time diference in seconds or minutes. alert(seconds); will show you difference in seconds and alert(mins); will show you difference in minutes.