jQuery Forum

Hi sir,

 

Actually I'm using the jQuery mobile  1.4.2 and iPhone 6 (IOS8)/ Samsung s4(android 4.4).

My code below:

html1 = '  ';

$.each(colleges, function () {

var programs = this [ 'Programs' ];

var name = this [ 'college_name' ];

html1 += '<div data-role="collapsibleset" data-theme=' +theme+ ' data-content-theme=' +theme+ '>' ;

html1 += '<div data-role="collapsible" style="margin-bottom: 10px;">' ;

html1 += '<h3>' + name + '</h3>' ;

$.each(programs, function () {

var programTitle = this [ 'program_title' ];

var creditHours = this [ 'credit_hours' ];

var description = this [ 'description' ];

var programLink = this [ 'link' ];

html1 += '<div data-role="collapsible" data-mini="true" style="margin-bottom: 5px;">' ;

html1 += '<h4>' + programTitle + '</h4>' ;

html1 += '<div class="ui-body">' ;

html1 += '<p><b>' +creditHourLabel+ '</b>' + creditHours + '<br>' + description + '<br>' ;

html1 += '<a onclick=openExternal("http://www.uaeu.ac.ae' + programLink + '")>' + moreDetails + '</a>' ;

html1 += '</p>' ;

html1 += '</div>' ;

html1 += '</div>' ;

});

html1 += '</div>' ;

html1 += '</div>' ;

});

 

  $("#undergrad").append(html1).trigger("create");

 

 

 

 

I can see a few optimizations you could make above, but they would probably be minor.

You haven't answered the most important question:

How large is 'large'?

Large pages should be avoided, especially if constructing them on the fly from data, both from the standpoint of unacceptable delay, but even more importantly from the perspective of user experience. Nobody wants to scroll through a large page on a mobile device!

But we can guess that large is large, because you are listing the entire course offering of all of the colleges of a university. That sounds LARGE!

You have unreasonable expectations - of the library, and of the user. I would re-think your UI. Would any one user even want to see all of the courses of every college? I doubt it!

This subject has come up often, and so you should search the forum for previous answers and suggestions.

A few things you can do:

- This looks like you used an HTML/Javascript book from 1999. Don't party like it's 1999!  Inline styles and inline "on"  functions are considered obsolete and poor practice today. You unnecessarily repeat the inline styles on every item when you could just apply CSS from a stylesheet. (And when you write the stylesheet, don't go crazy with classes for repeated structures like this. Use the HTML structure, Luke!) You unnecessarily create variables and use an obsolete form of object subscripting - use the dot notation.

- While generally good practice to build-up your HTML in a string before appending to the DOM, this may be carrying things too far! You build up one huge string for the whole thing. This will make an unnecessary demand on device memory. As the string gets bigger, it will have to keep expanding and will get more and more inefficient to work with. How about limiting the size of the string to one course? Also, you do many small appends of constants when you can combine. (Your closing tags.)

- If you really need to present something this big (I say you don't...) consider pre-rendering. As you have discovered, widget creation is slow. You can create the detailed HTML for the widgets yourself and it will be much faster. Carrying it one step further, your server could provide the pre-rendered HTML instead of JSON. (Why not provide both? I worked on Playstation back-end a few years ago. They provide XML for consoles and HTML for browsers from the same URLs... You could provide it 3 ways - HTML for desktop browsers, JSON for generalized API, HTML fragments specifically tailored for this app) I know HTML fragments instead of JSON are counter-trend, but you can be trendy, or you can make it fast.

- Or forget the collapsible, and just write your own simple HTML and CSS. I haven't done this with collapsible, but I do this routinely for lists. I seldom use jQuery Mobile listview. listview is a pig. I'd guess so are collapsible sets. And, anyway, flex-box CSS rules!

Once PhoneGap implements WKWebView, then the penalty box is removed for devices running ios8 or higher, since they will get the same just-in-time compilation as Mobile Safari.

So, hybrid apps on iOS (so long as they still use UIWebView) take slow and make it slower! You need to be a bit sneaky to get some performance out of it.

Thank you for your valuable replay, I create HTTP Adapter to retrieve the data from XML and stored in JSON my long data is in XML 9 colleges and each one has from 4 to 8 programs and each one has details. I did a timer and it was clearly the delay from append the DOM data to div response   $("#undergrad").append(html1).trigger("create");