I'm doing a bunch more device testing here and there and I notice a pretty good lag in page transition from the time the spinner disappears (i.e. the .ui-loading class removed off of HTML) and the actual paint of the page.
I'm testing on an IPhone 4 (not 4s) with 5.1 installed. I do have some script on these pages, but I've removed it all and I'm getting the same lag. The markup for each of these pages is about 10k and I do have a persistent footer bar. My transitions are left default which is fade.
Basically, I'm running this from localhost and on internal wifi, so I'm a little lost as to what to try next. From the time of click until the time the next page paints is usually between 4.5 and 6 seconds. But, the spinner goes away almost instantly usually which tells me the ajax requests are done instantly.
I don't see a similar delay when I look through sites on the jqm gallery. Though, it seems that almost all of those sites are running on 1.1.1.
Anyone have any idea what's going on from removal of ul-loading and the actual page show? Any ideas as to what might be hanging that for 2-3 seconds?
Also, I had a side question about why JQM is running script on every transition to add the min-height to the page element. Obviously, it's to have it be the full height of the viewport. But, that's not necessary on newer devices! Height: 100% works fine as long as it's containing elements (body and html) are also height 100%. I see alot of bugs around the height of the page being calculated slowly and the white strip you get at the bottom until the script can catch up. Doing this in CSS might also make persistent footers render cleaner (stay at the bottom of the page) for browsers that support fixed positioning.
Now you might argue whether this makes sense or not ( I think it does, because the structure is coherent across all JQM widgets), but it sure takes time to convert your list item into a JQM list item.
The same goes for all widgets so depending on how much stuff your page contains, it will stall while the page is being enhanced.
I have been trying to lot to cut down on the stalling. One way is to send enhanced markup vs plain HTML and just insert this into your page. However you cannot call trigger("create") on these elements, because doing so, will re-enhance them (breaks the widget, looks funny). The trick would be to modify JQM so calling trigger("create") with something like data-create="false" would only add the event bindings and not do any HTML manipulation. I'm working on something like this, but so far I only have it for buttons, controlgroups, collapsibles and the collapsible-set widget. Sitting on listview which is the hardest.
For the elements you can use this, you will have almost 0 stalling, which feels pretty nice. I will publish what I have so far in a while to my JQM factory repo. But will be a while.
Ya, makes sense. Though, my pages are very very small. They usually have 1 listview with a set of listitems wrapping enhanced buttons. And, my lists are 3-6 items long.
I do what you're saying alot - rendering elements pre-enhanced - but I've never done it with the list items themselves. Usually just buttons or other simple things here and there. And, as long as you remove all the data attributes they don't get re-enhanced. (Except data-theme) Can't remove that one or hovers won't work.
If you come up with something cool definitely let me know. Also, does prefetching pre-enhance as well? In other words, is it literally a DOM swap to navigate to a pre-fetched target? Or, does it not enhance it until you navigate there?
Not sure about pre-enhancement when prefetching. I think the enhancement is done on pagebeforeshow, so your prefetched pages will stay un-enhanced.
About the page stalling... mh. Not sure what to make of it, when you don't have a lot of widgets on the page. Really hard to pin this down if you can rule out your requests and elements are pre-enhanced. Just for an attempt, try without calling trigger("create") and see what happens.
Leave a comment on frequent's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic