Menu
I'm developing a web application using jQuery Mobile on the client side and PHP & MySQL on the server side. The application works great on desktop browsers like Safari, Chrome and Firefox. However, on the iPad - where the application is opened as a web clip from the home screen - the application performs much worse. Scrolling works fine, but tapping a link to load a page from the server goes very slow.
A recording of the iPad's screen shows that (for example) after tapping it takes 0,3 seconds before the tapped element is highlighted and the loader is shown. After 1,0 second from the start the lower half of the opened page is rendered/shown (below the loader). It then takes another 0,6 seconds before the upper part of the page is shown, making the total time required to load the page 1,6 seconds. A video showing this process (played at 25% of the original speed) can be found here.
I understand that loading a page (over WiFi) takes some time, but I do not understand why rendering the upper half of the page takes an extra 0,6 seconds. Assuming that the page is fully loaded after 1,0 second (because the lower half of the page is already shown then), I think that takes pretty much time as well, because it only takes around 0,5 seconds on Safari on my Mac. But that might be caused my the slower processor in the iPad and the lag of the WiFi connection.
Hopefully someone knows some (client side) optimisations to make the application perform (or feel) faster. I already disabled animations within jQuery Mobile and I will try to optimise the server side myself.
Maybe these things are important to know:
<head> with multiple referenced stylesheets and scripts. Does jQuery Mobile ignore the <head> or diet this take processing power?<div data-role="…" data-position="fixed" data-id="…" data-tap-toggle="false"> to accomplish this. The header and footer are included in all pages as well.<a data-role="button"> tag), a title in the middle (<h1> tag) and a controlgroup on the right side (<div data-role="controlgroup">) containing two buttons (<a data-role="button">).<a href="…" data-role="button" data-rel="dialog" data-prefetch>). This button is included in every page, but the href of the link is the same on each page. This might be something..?
<div data-role="navbar">) with several items (<li><a>).<ul data-role="listview" data-filter="true">). That currently contain just a few items (<li><a>, max. 5) and list dividers (<li data-role="list-divider">).<form>) containing listviews as well (<ul data-role="listview" data-inset="true">) with several form fields inside (<li data-role="fieldcontain">).Well, that are all 'special' things I can think of. If you need to know more or see some source code, please let me know.
452
long listviews are extremely slow... if you are populating a list in pagebefore/show; try adding smaller number of lis initially and append the remaining after a small timeout.
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
