title: How to Performance Tune a jQuery Mobile iOS/Android Web App
body: <p>I've been developing a web app using JQM to target iOS and Android devices. For much of the start of the development, I have developed and tested using Chrome (currently v13) on the desktop. As we get closer to our production release deadline, I have increased testing on physical iOS and Android hardware; the difference in performance between the desktop and mobile browsing experience is enormous.</p>
  
  <p>The client/server interaction is very simple. The client requests a set of views, which the server returns. The client can then request the set of nodes associated with a particular view, which the server will return in a single payload. The client then generates the DOM for each node from the corresponding XML. </p>
  
  <p>I have begun testing with XML payloads at or greater than 400kb. On the desktop, in Chrome, this is no issue. On mobile, in Mobile Safari, my DOM load times alone can be close to 12 seconds. Interactions with the DOM (which trigger updates to the XML, cached in localStorage) can take up to 5 seconds <em>per click</em>.</p>
  
  <p>While I can think of half a dozen different ways to optimize my client/server communication--I can't figure out how to measure the expense of my individual method calls from the mobile client. I know that a 400k payload is too much for the iOS Mobile Safari, but I don't know whether the performance cost I'm incurring comes from traversing the DOM or manipulating the XML.</p>
  
  <p>How can I perform metric analysis of my mobile web app from the perspective of the mobile client? Performance tuning to the desktop isn't getting me anywhere, and I don't have an equivalent developer console/FireBug on the mobile side.</p>
  
  <p>How do other mobile developers solve this problem?</p>