Hi I have a page with a header, a content pane, and about 120 list items.
Header & content :
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div><div data-role="page" id="factorList" data-theme="a" data-dom-cache="true" data-url="/FactorList.aspx" data-external-page="true" tabindex="0" class="ui-page ui-body-a ui-page-active" style="min-height: 502px; "><div data-role="header" class="ui-header ui-bar-a" role="banner"><h1 class="ui-title" role="heading" aria-level="1">Factors</h1><a href="index.html" data-icon="plus" data-iconpos="notext" class="ui-btn-right ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-icon-notext" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" title=""><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-plus ui-icon-shadow"> </span></span></a></div><div data-role="content" class="ui-content" role="main"><form class="ui-listview-filter ui-bar-a" role="search"><div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-a"><input placeholder="search name or account no..." data-type="search" class="ui-input-text ui-body-a"><a href="#" class="ui-input-clear ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" title="clear text" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="a" data-mini="false"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span></a></div></form><ul data-role="listview" data-filter="true" data-filter-theme="a" data-filter-placeholder="search name or account no..." data-split-icon="info" data-split-theme="a" class="ui-listview">
List items (x121) :
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-count ui-btn-up-a"><div class="ui-btn-inner ui-li ui-li-has-alt"><div class="ui-btn-text"><a href="GarageList.aspx?id=fdeb1470-be89-4ec5-a19c-bf5633c985fe" data-transition="slide" class="ui-link-inherit"><h3 class="ui-li-heading">G9714</h3><p class="ui-li-desc"><strong>123 AUTOPARTS</strong></p><p class="ui-li-desc">DUNDEE</p><span class="ui-li-count ui-btn-up-c ui-btn-corner-all">18</span></a></div></div><a href="FactorDetails.aspx?id=fdeb1470-be89-4ec5-a19c-bf5633c985fe" title="" class="ui-li-link-alt ui-btn ui-btn-up-a" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="false" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text"></span><span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="info" data-iconpos="notext" data-theme="a" title="" class="ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all ui-btn-icon-notext"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-info ui-icon-shadow"> </span></span></span></span></a></li>
Basically this performs so sloow and buggily on an iphone 3gs with ios5.
Here are some of what it does :
1. There is a login page before that page above, to get to that page above the spinner spins then STOPS spinning and freezes, then the screen goes all grey for about a second or 2, then the page above displays (and Im hosting the website locally on a server).
2. Once the page loads, it hesitates a lot to scroll down, every scroll stops then starts, its very jerky until Ive scrolled all the way down once then its a bit better. While scrolling down the page goes completely blank often with checkerboard background...
3. Upon a tap of any item on the above list it takes approx 3 seconds to light up blue, then takes another couple of seconds to actually go to the next page (same freezing issue with spinner).
4. Once the next page loads its content is mashed up with the page above, so they are like on top of each other, it takes a second for that to disappear.
As you can see, a terrible experience. My company has many 3gs phones, any way I can improve the performance?