Question

I am using a sample application compiled by PhoneGap and deployed to Android. Lags significantly – my refresh time is set to 100ms and yet you can feel that the acceleration readings only update every 1-2 seconds in a rather “jumpy” fashion. The phone is a single-core HTC phone running android 2.xx OS. (don’t have more details – don’t have the phone right now).

Acceleration Example

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">

var watchID = null;

// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready, start watching
function onDeviceReady() {
    startWatch();
}

// Start watching the acceleration
function startWatch() {
    // Update acceleration every 3 seconds
    var options = { frequency: 100};

    watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, 
         options);
}

// Stop watching the acceleration
function stopWatch() {
    if (watchID) {
        navigator.accelerometer.clearWatch(watchID);
        watchID = null;
    }
}

// onSuccess: Get a snapshot of the current acceleration
function onSuccess(acceleration) {
    var element = document.getElementById('accelerometer');
    element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
                        'Acceleration Y: ' + acceleration.y + '<br />' +
                        'Acceleration Z: ' + acceleration.z + '<br />' + 
                        'Timestamp: '      + acceleration.timestamp + '<br />';
}

// onError: Failed to get the acceleration
//
function onError() {
    alert('oooops!');
}

</script>

Waiting for accelerometer…
Stop Watching

Answer 1

I don’t know if this can help, but it seems changing innerHTML with the value only instead of an entire string get better performance.

Check out this jsperf: http://jsperf.com/innerhtml-perf