Slow loading on iPhone 3gs in peculiar circumstances

[cilogi]

I have 2 pages which differ only in the footer. One has a link, the other just text. The first loads very slowly on iPhone 3GS/iOS 4.3. The page displays but then is locked for a few seconds. Completely unacceptable. On less simplified pages I get a JavaScript execution exceeded error. The second page load OK (slow but acceptable).

Both pages are fine, and load fast, on Chrome and Firefox.

An example which loads the pages via Ajax is here.

The first page (slow) is here.

The second page (fast) is here

I would be interested to know why the big performance difference when there is so small a difference in the markup!

[toddparker]

This seems like a better question for the forums be abuse it's so vague. Of you narrow this down to a clear, reproduces test case like "nesting widget x inside a collapsible causes the browser to hang" and provide a jsBin test page using the latest, please open a new issue. Thanks!

[cilogi]

I can understand that you're not worried about this, but I don't agree that its vague. You have 2 syntactically correct files which are identical except that the first does not have a 3 line footer at the end. The first is 5 seconds slower to render on the the iPhone, which to my mind is a critical problem as it makes the framework unusable. How is this vague?

Because the files are large I can see that it might be tricky to debug, although someone who has written the code is much more likely than me to see what might be the problem. So, if you think that (a) its a problem which is unlikely to occur in the wild and (b) we've got a h*\ of a lot of other stuff to fix, fine, but its NOT vague!

I did set up a test, which you can download and/or run. The same problem occurs on the latest versions from Git.

[cilogi]

Todd,

Thanks for the quick response. I've replied to your reply. It wasn't clear from your reply how closely you'd read the bug report as I think it IS precise!

From my perspective, which is that I'm using jQM to display large-ish content files the performance problem is a killer, especially as it occurs on iPhone but not desktops, so I then worry about portability... I'll spend some time trying to narrow down, but its quicker to try a workaround!

I deeply appreciate the work you guys are doing, awesome stuff!

Tim

On 10 July 2011 11:39, toddparker < reply@reply.github.com>wrote:

This seems like a better question for the forums be abuse it's so vague. Of you narrow this down to a clear, reproduces test case like "nesting widget x inside a collapsible causes the browser to hang" and provide a jsBin test page using the latest, please open a new issue. Thanks!

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/2049#issuecomment-1541402

[toddparker]

Sorry if my response seemed dismissive, I was replying on a mobile. Anyway, my issue is that even though you said these are identical except for the footer, when i looked at the two pages, there is a lot more of a difference in these files than you say, it's not just a difference in the footer.

The first link (1-Oak) is 90k http://dl.dropbox.com/u/17994/jqm-perf-bug/1-Oak.html

The second link (2-Oak) is 74k AND there's an issue with the markup because it appears unstyled if viewed directly in Chrome http://dl.dropbox.com/u/17994/jqm-perf-bug/2-Oak.html

In any case, there's 16k more markup in the slower example which tells me these are far from identical. The fact that Oak-2 is unstyled is a red flag that there might also be a syntax issue in your code. I'm not sure what's going on or if it's even a real problem without taking a lot of time diff'ing your code and checking for syntax issues.

This is why I asked you to create a cleaner test page that starts with identical files, then adds a single change to the footer to provide a better test page. We need to eliminate all the variables to troubleshoot the root case of issues and this doesn't do that in the current form. We need very clear test cases to be productive because we're pretty busy.

I took a quick look at the footer in Oak-2 and it clearly has a syntax issue: there is no opening bracket on the footer div:

    </div>
div  data-role="footer" class="ui-bar">
    <h4>Footer</h4>
</div>

Any cases where there is a ton of code dumped into a ticket and a "this doesn't work right" message is better suited for the forums because people there may have the time to review your code more deeply.

The ideal case woud be to use a jsBin page for your demos. Makes debugging easier. Template here using the latest: http://jsbin.com/awofog/edit

[cilogi]

Todd,

Thanks for the reply. I'm afraid I screwed up and changed the files while while I was trying to work out what was going on. Must have been working in the wrong directory. I'm really sorry to waste your time like that.

The files were syntactically OK at one time and I've put them back as they were. I'll make sure to leave them in future -- not used to using DropBox.

Anyway, I found out that including a header div sorted the problem -- it looks like some kind of hang as the refinement process is quick. I'm happy to leave it since I have something working. I don't have any way of profiling the iPhone so really can't do much.

Sorry again for screwing up the files. At least if something like this does crop up again you guys will have another data point. Makes me realise what a nightmare you must be having with little quirks cropping up all over the place.

Thanks again for all the good work.

Tim

On 11 July 2011 17:15, toddparker < reply@reply.github.com>wrote:

Sorry if my response seemed dismissive, I was replying on a mobile. Anyway, my issue is that even though you said these are identical except for the footer, when i looked at the two pages, there is a lot more of a difference in these files than you say, it's not just a difference in the footer.

The first link (1-Oak) is 90k http://dl.dropbox.com/u/17994/jqm-perf-bug/1-Oak.html

The second link (2-Oak) is 74k AND there's an issue with the markup because it appears unstyled if viewed directly in Chrome http://dl.dropbox.com/u/17994/jqm-perf-bug/2-Oak.html

In any case, there's 16k more markup in the slower example which tells me these are far from identical. The fact that Oak-2 is unstyled is a red flag that there might also be a syntax issue in your code. I'm not sure what's going on or if it's even a real problem without taking a lot of time diff'ing your code and checking for syntax issues.

This is why I asked you to create a cleaner test page that starts with identical files, then adds a single change to the footer to provide a better test page. We need to eliminate all the variables to troubleshoot the root case of issues and this doesn't do that in the current form. We need very clear test cases to be productive because we're pretty busy.

I took a quick look at the footer in Oak-2 and it clearly has a syntax issue: there is no opening bracket on the footer div:

   </div>
div  data-role="footer" class="ui-bar">
   <h4>Footer</h4>
</div>

Any cases where there is a ton of code dumped into a ticket and a "this doesn't work right" message is better suited for the forums because people there may have the time to review your code more deeply.

The ideal case woud be to use a jsBin page for your demos. Makes debugging easier. Template here using the latest: http://jsbin.com/awofog/edit

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/2049#issuecomment-1547623