I have a large nested array that I’m generating from parsing a CSV file in PHP. I had it output it in JSON and had my jQuery Mobile site fetch it, then parse it into a DOM list <ul>, <li>. This worked fine on my desktop browser but seemed to take forever on my mobile devices.
So then I had the PHP script actually output the HTML, and pasted that in my jQuery Mobile site to see if that sped it up. This essentially removed the fetching of any data. The index.html simply has a very large nested <ul> in it. I figured this would definitely load quickly, but it seems to take even longer now on my mobile devices (Nexus One & Blackberry).
Is there any way to speed this up? Here’s a demo http://pastehtml.com/view/bkrviwxp4.html
I tried data-prefetch on the link but that prevented the page from loading entirely on the blackberry.
As I see, you’re processing all elements at once, however you don’t display them all at once. Try to process and add to DOM only these elements that will be displayed. JQuery-mobile is very slow by itself even if there’s only a pair of elements, you have thousands.