iOS & JavaScript event response time optimisation

When developing HTML5 applications with JavaScript, iOS click and touch response times are infamously slow. With speed in mind, here's some advice from down in the trenches at Clock on how to improve the responsiveness of your applications.

Don't listen to Click's

After a user taps their device, the iOS browser will wait roughly 300ms to decide if the user performing a click or a more elaborate swiping gesture. To liberate your application from this delay you can instead listen to the immediately triggered touchstart event. To detect when this is available and utilise it along side your traditional click event you can perform the following test as you bootstrap your application:

var eventName;
if ('ontouchstart' in document) {
  eventName = 'touchstart';
} else {
  eventName = 'click';
}
$('.button').on(eventName, function(event) {
  alert('ding');
}

NB: you might also be interested to know you can also listen for the verbosely named touchmove.

Decapitate your DOM

Still finding our button actions to be unacceptably delayed, we recognised a distinct link between these response times and the amount of HTML rendered onto the DOM. For us, this was key. The application we were building consisted of one HTML document which, using CSS3 animations, took the user through a number of different pages/views. Given our situation, the technique which offered the most substantial benefit was to hide the HTML from the browser untill it was needed. We achieved this by housing markup in tags and appending it to the DOM only when required.

<script id="panel-template" type="text/html">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  </p>

</script>

As we were only substituting static text and markup we decided not to use any specific templating technology, Instead enlisting jQuery to retrieve and append our templates.

<script type="text/javascript">
  $(function() {
    $('body').on("click", function() {
      $("body").append($('#panel-template').html());
    });
  });
</script>

A number of JavaScript frameworks will manage this process for you (we're rather fond of Sencha). However, these framework can themselves impose their own performance overheads, which can be in turn exacerbated by use of PhoneGap

Flatten your DOM

Even with the DOM heavily truncated our application still demanded better performance. To attain better results we had to sacrifice the verbosity of our markup. Our designers, to their dismay, were consequently required to flatten down images which were previously layered on different z-index's. This helped reduce the nesting & complexity of elements and lower the application's memory footprint. Aside flatting markup, our designers were repeatedly compressing assets into ever smaller and smaller files.

(Sprites deserve a mention here)

By this point, developing our application bared striking resemblances to optimizing a game. While our application made high demands of the hardware available on our list of supported devices, we were able to get performance up to a satisfactory level.