I am developing a web application using jQuery Mobile on the client side, as well as PHP and MySQL on the server side. The app works great on desktop browsers like Safari, Chrome and Firefox. However, on the iPad - where the application opens as a web clip from the main screen - the application works much worse. Scrolling works fine, but clicking a link to load a page from the server is very slow.
Recording the iPad screen shows that (for example) after clicking on it, it takes 0.3 seconds until the highlighted item is highlighted and the bootloader is displayed. After 1.0 seconds from the beginning, the lower half of the open page is displayed / shown (below the bootloader). Then it takes another 0.6 seconds until the top of the page is displayed, and the total time required to load the page is 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 (via WiFi) takes some time, but I don’t understand why rendering the top half of the page takes an extra 0.6 seconds. Assuming the page is fully loaded in 1.0 second (because the bottom half of the page is already shown), I think it takes quite a while because it takes about 0.5 seconds in Safari on my Mac, But it could be caused by my slow processor on the iPad and lagging behind the WiFi connection.
I hope someone knows some (client-side) optimizations so that the application (or feeling) runs faster. I have already disabled animations in jQuery Mobile, and I will try to optimize the server side myself.
Perhaps this is important to know:
- , ,
<head> . jQuery Mobile <head> , ? - .
<div data-role="…" data-position="fixed" data-id="…" data-tap-toggle="false">, . . - (
<a data-role="button">), ( <h1>) (<div data-role="controlgroup">), (<a data-role="button">). - , (
<a href="…" data-role="button" data-rel="dialog" data-prefetch>). , href . -..? - (
<div data-role="navbar">) (<li><a>). - (
<ul data-role="listview" data-filter="true">). (<li><a>, 5) (<li data-role="list-divider">). - - (
<form>), (<ul data-role="listview" data-inset="true">) (<li data-role="fieldcontain">).
, "" , . - , , .