This might be a wierd behavior, haven't found any topic about. But maybe one of the gurus out there can help.
Using cordova 3.x
I have a form with input fields. Multipage jquerymobile 1.4. iPhone and iPad iOS 7. Both has the same issue. Android no issue.
When I load the very first time the App and I try to type in any of the input fields, the CPU goes 100% and after a while (30 sec) the field goes focus and the cursor blinking like normal. Then after this (apparently freezing eternal lasting) time, everything works.
If I close the app and open it again, no problems at all.
What could be the reason and where can I start looking for this weird odd and nasty bug?
Related
I have a set of iPads (3rd gen) running iOS 9.3.5. This is the highest they support. I am attempting to replace the functionality of a custom iOS app with an equivalent web application. The site is built in Angular 11, targeting es2015, and I've declared iOS > 9 in the browser support file. The majority of the site performs exactly as I would expect for such old devices. The linchpin of the whole thing is this third party form that needs to be filled out that is served up as an iframe, and it performs so, so horribly.
Here is the code of component HTML with the iframe (URL changed for privacy):
<div class="row header"><a class="restart" (click)='restart()'>Start Over</a><a routerLink='/welcome'><i class="fa fa-times close-x"></i></a></div>
<iframe src="https://notarealsite.com" (load)="waiverLoaded()"></iframe>
The waiverLoaded function is a simple boolean flip to detect the embedded page reloading upon completion so that I can route to a different component in my app. The performance is unchanged if the iframe is the only element on the page. Other pages that play nice when embedded do not suffer a performance drop like the waiver does, so I have to assume it's something in the code of the waiver page.
The original custom iOS app uses a webviewer to load the page, and it loads in 2 seconds or less. The same performance can be seen by visiting the page directly in Safari. In both instances the responsiveness of the dynamic form is reasonable given the age of the devices. When loading the page via an iframe the performance tanks. We're talking 30-45 seconds of loading, and sometimes up to a full second delay between tapping a button or field, and the form reacting.
I have attached the device to my computer and used the remote inspector in the MacOS Safari to view the timeline. The majority of the initial load time is the several 1-2 kb image files used by the form like the scroll bar and some icons. Usually one of these items ends up taking 20-25 seconds all for themselves. When interacting with the form there's an XML resource that appears in the timeline every field change or button press, and that is what takes around a second or two before the page is up to date again.
I'm not well versed in troubleshooting web application performance like this, and this is my first real Angular application that I've built, so I might be missing something painfully obvious. What can contribute to such a difference in performance between a page being visited directly, vs being placed in an iframe?
Some additional info:
The performance is the same between running locally via npm serve or built and deployed to my local server.
I have tried hosting it via HTTP and HTTPS in case it was some security hangup, as the form is only delivered via HTTPS. However I only have a self-signed cert at the moment.
I have seen no discernable difference in load times between the two methods on my other devices, including an iPad Air running iOS 12.5.2.
There is a warning in the console about jQuery support on iOS 9.3.5 being outdated, but it occurs in both scenarios.
Additional Troubleshooting
I've tried to look into some of the suggestions I've received. I've checked the timings and headers on the slow loading elements in Safari in the following configurations:
In the iframe on my app on the iPad.
Visited directly on the iPad.
In the iframe on my app on my MacBook Pro.
Visited directly on my MacBook Pro.
On my laptop the performance is nearly identical. Comparatively, on the iPad the actual load times of all the elements is within a millisecond or two of their times on my laptop. What ends up being notably different is the latency between request and response for the elements.
The latency when visiting directly is higher than on my laptop. When loading through the iframe all the timings increase fairly proportionally. A time of 750ms jumps to 4s. A time of 6s jumps to 30s.
Lastly, a real oddity to me, is the super high latency image for some reason results in a 302 to Cloudflare, but only on the iPad. It doesn't matter if it's through the iframe or direct. Both devices are using the same WiFi network. I can't think of a reason for the redirect to happen unless the destination site is handling the iPad differently somehow. Changing the UserAgent in Safari on my laptop to match the iPad doesn't result in the same redirect.
So I've confirmed that even outside of the iframe the site in question behaves differently on iOS 9.3.5 than on newer versions, and compared to my computers.
Please post your code for us to diagnose and help. In general there is more overhead for an IFrame my suspicion is the jQuery handler or cookie policy, to be sage I also listed other items to check.
It looks like you already checked the previous unsecured elements which was an issue. Both in the network graph and the calls, double check there are no dependencies or URL calls of the Iframe of unsecured elements then it wont display, it used make multiple round trips if Https had mixed content between secure and non-secure stuff, there's a ticket for A new TLS issue.
Once you fix that ensuring its hosted/called securely, clear the cache, cookies, data completely and reloading the page fixes the problem even on mobile browsers.
Redirects/Bouncing Your order of loading scripts/css, if there are dependent scripts and they are not cached it could be blocking, or if its redirecting back to HTTP this will also slow it down.
For IOS mobile apps only (doesn't apply here) - if you are using the 3rd gen, check the default for Cookie Security policy (HTTPCookieAcceptPolicy) for UIWebView has changed to NSHTTPCookieAcceptPolicyOnlyFromMainDocumentDomain
Animations Are slow in safari Iframes
You have the click event in your code, could be the issue
..."Turns out that any non-anchor element assigned a click handler in jQuery must either have an onClick attribute (can be empty like below):"...
Put the following element declaration cursor:pointer or tap event
Is there any reason whatsoever for huge performance issues after clicking an item that brings you up to another screen ?
I've successfully done some very nice and fast unit testing with appium in python over an android app. The problem is, everything works fast and fine, until I click an item that shows more products in a new screen. After that, every single call to self.driver.find_element_by_id or by whatever takes like 10 full seconds no matter what, before it was instant.
I did timing and performance testing, and after clicking the item with .click(), everything takes 10 full seconds to complete, which was instant before.
Is there any reason behind this that I'm missing ? Maybe because of switching to the new screen that might be a a different activity ?
Example:
self.driver.find_element_by_id("sticky") <= every call before this is pretty much instant
more_item.click() <= this click ruins everything
sleep(5)
self.driver.find_element_by_id("sticky") <= every call from now on, even if it's the same as above, takes 10 full seconds no matter what
instead of using self.find_element_by_id(***) use find_element_by_androidUIAutomator that will increase the response time of Appium for you.
Hope this helps.
While scrolling my jQuery Mobile enabled site on a mobile device (at least iPhone 4 and 5), it almost always freezes for a few seconds, sometimes significantly longer. Usually it eventually just crashes and I have to kill Safari (or Chrome) from memory.
I'm having trouble identifying the cause. I know they state there are issues with transitions, and I tried adding .ui-page { -webkit-backface-visibility: hidden }, but it didn't help.
I'm guessing it might have to do with one or more scripts that are running. My scripts file essentially contains a set of scripts that run for both desktop and mobile, and two more sets that run exclusively for desktops and mobiles respectively. The common set is wrapped in a conditional ready function, $(document).ready for desktop and $(document).on('pageinit) for mobiles.
Also, based on the device, all the scripts are either loaded in the footer for desktops and the head for mobiles. However, the main scripts file is loaded in the footer for both. The scripts wouldn't work on mobiles otherwise.
Not sure if iOS preventing DOM manipulation on scroll is conflicting with something.
I would just link the site, but professional confidentiality and all that.
I'm not asking you to just guess what the cause may be, but I would really appreciate an outline of some fundamental principles of developing with jQuery Mobile to optimize performance.
According to the documentation (navigate to "scrollstart"), it is expected that DOM manipulation is frozen during scroll in iOS devices, even in iOS 7.
I have a small web app. Seven pages, 3.6 KB index.html and 855.5 KB total. The only odd thing i have is a database (~500kb) in Javascript with many lines like:
$.data(db,'Aarstraße',['34236:1','34246:2','34270:4','34290:6',...]);
I tested it on iPod/iPhone and Android (HTC Magic) and it is very slow:
Startup
iPhone: 14 seconds
Android: 21 seconds
Simple page transition (slide)
iPhone: 3-4 seconds
Android: 4-6 seconds
How can I make this fast?
I already removed the box shadow.
Update
I remove the database leaving 444.7KB page total. Now it runs faster on Android. Around the same as one iPhone. It still feels very slow.
Update 2
After this question, I switched to the latest jquery mobile build. It improved the page transitions for slow Android devices to ~2 seconds per transition. Release of Version 1.1 will be mid/late February.
There are a few things you can do:
Get to deviceready faster.
Minimize your JS code using YUI Compressor
Move your script tags to the bottom of the body tag.
As you've already mentioned you've moved the database out of the equation which was probably taking a bulk of the time on startup.
What do you do with jQuery-mobile? It's performance is very poor, you should never call it on elements bigger that required. See this discussion about jquery-mobile for details. It is doing very large number of DOM search operations because it works by modifying the DOM tree. As for my tests, it works too slow even on desktop browser.
Try without transitions. Even with jQuery 1.1, the page transitions can be really flickery and slow on an iPhone.
To drop page transitions globally, just add the following to jqm.glocal.config.js
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition="none"
});
I have an html5 application that listens to all window.applicationCache events. When it needs to download, I write a pretty dialog to the screen, and during the progress event I calculate the percentage of files done by doing the right math on the event.loaded and event.total properties, in order to update the percentage with it.
The result is a fine dialog that says "Installing n%" up to 100. Everything works out as I expect it, and the application caches offline nicely and starts on all browsers.
However, on iPad, this doesn't seem to work. The only thing I can achieve during applicationCache events is write to the console. There I do see these events actually being listened to by my handlers.
I've tried everyting up to function timeouts.
My questions:
Is there a way to update any HTML and visualize this during these events on iPad?
Why is the iPad not downloading everything in one go like all other browsers do? It seems to go into idle state for a reason unknown to me.
PS: I need to cache over 600 files. The total size is under 1Mb in total.
I have the same problem. The other applicationCache events (updateready, cached, downloading) do trigger and you can change the html using jQuery or whatever to indicate changes but not the progress event. I can understand that the iPad might not choose to support this event as this is an event that could get triggered many times and may affect the perfomance of the iPad's slower processor. Regarding the download, you need to make sure that every resource listed in your manifest is available.