What's the fastest way to load a large nested list in jQuery Mobile?

Question

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.

Answer 1

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.

Answer 2

It would be faster to not use the nested listview feature of jQuery Mobile as it is not designed for loading large numbers of elements efficiently. The development team has even considered deprecating the nested list feature in the past.

Instead, the better way to present nested data is to put each level of the list into its own HTML page and to use the standard jQuery Mobile page model to display it.

Additionally, if you have a large amount of markup to be parsed by jQuery Mobile, in my experience, you can get significantly increased performance by having your PHP script generate the necessary markup and classes, and creating your own jQM widgets which do not attempt to traverse hundreds of DOM nodes. This performance increase comes at the cost of bandwidth, but so far, my experience has been that overall load times are decreased on mobile devices when done in this manner.