February 20th, 2008 · Posted by Andrew Zuercher ·

Performance Tuning Appcelerator Applications

Purpose

Once you have developed a functional application and are priming for a roll-out, it will be in your interest to tune your application and identify those touch-points which are candidates for tuning. I’ve preferred taking a quantitative approach to performance tuning so that you can compare metrics before and afterwards to identify improvement from a measurable perspective. To this end, it is possible to record statistics both client and server side (currently only for java services). Sometimes the culprit may be server side or client side and determining the area where performance bottlenecks exist is important which is why taking on a triangulation approach is important.

Client Side

Currently in the client, you can invoke the Appcelerator.Util.Performance component. To enable it, simply include logStats=1 in your url, for example: http://localhost:8080/myapp?logStats=1. The performance component by design will have no impact on your application unless you include this parameter. By default, the servicebroker will calculate the statistics for handling all message types both local and remote. The statistics will include the following:

  • last - the last recorded time
  • mean
  • hits - aka count
  • min
  • max
  • total - total time overall

These statistics will be logged to the console (available in Firefox with Firebug and in Safari with Webkit).

logging output

However, you do not need to have logging available to inspect the statistics (please see the section “Viewing Client Side statistics” below). In addition the component also allows for resetting all statistics to restart your recording.

Capturing your own statistics

If for some reason you want to capture statistics at a finer level, you can easily to this in javascript:

1
2
3
var stat = Appcelerator.Util.Performance.createStat();
//do some work
Appcelerator.Util.Performance.endStat(stat,"mystat","mycategory");

In this example we create a statistic called “mystat” that will be included in a category of “mycategory”. This is useful for filtering through your stats as well as being able to compare statistics side by side. For example, the service broker will automatically record the following categories:

  • remote
  • local

Viewing Client Side statistics

You may want to include the following content file in your application and make it visible when the logStats=1 parameter is included.

performance screenshot

Here is the content source itself
clientperformance.html

Tuning Considerations

As you develop larger applications, it may be useful to consider the following tips:

  • use lazy=true for app:content files. this will help to delay long initial load times for your applications
  • if you do not lazily load your content files, consider postponing app:message invocations until they are needed
  • consider using CSS selectors in the implementation of your app:iterator rather than re-firing messages for logic
  • leverage the app:datacache to reduce the number of outgoing messages
  • make use of pagination if rendering large datasets - the app:datatable allows for client side pagination for example

Wrap Up

We covered in this article

  • how you can capture statistics for client side applications
  • some performance tips in regards to client applications

In a later article we will identify how you can take this a step further to capture statistics on the server side as well with java services.This article has been cross posted on

  • http://zuerchtech.com/2008/2/20/performance-tuning-appcelerator-applications
  • Popularity: 6% [?]

    Tags: Documentation · Example · Opinion

    5 Responses to “Performance Tuning Appcelerator Applications”

    1. andrew zuercher Says:

      One more thing that I didn’t mention in the article is that you can also make use of Firebug’s profiling module. This is useful for detecting low level javascript methods to identify bottlenecks as well.

    2. Andrew Zuercher Says:

      One thing that I failed to mention is the difference in performance between the browsers (taken from http://zuerchtech.com/2007/12/13/thats-it-im-writing-a-browser-part-2-of-2):

      firefox3: loadtime 12 seconds
      firefox2: loadtime 20 seconds
      IE7: loadtime 89 seconds
      safari: loadtime 10 seconds

      Note that these are load times for extremely large applications and the firefox2 loadtime was with firebug enabled. Without a doubt Safari is hands down the pinnacle of browsers in the dynamic AJAX enabled space.

    3. andrew zuercher Says:

      On the topic of items flagged as remote vs. local messages: the statistics that are calculated define the amount of time that is required to process the message in the client tier for all the listeners of that message. For example, in monitor.performance.response this includes hiding a div that shows a processing icon and rendering an app:datatable: it does not include sending the request nor the server side processing nor the deserialization of the message. For identifying server side processing statistics, i will in a later article define how to monitor performance of java services.

    4. amousa Says:

      Isn’t this a new feature in 2.1 or the current trunk; not 2.0.2?

    5. andrew zuercher Says:

      I didn’t specify where this is currently available: its true you will have to checkout trunk or wait for the 2.1 release to leverage this functionality.

      cheers

    Leave a Reply