We have been developing an application which can consume a large amount of data (say tables/proxys with 4000 + rows) in Sencha Touch.
When we run the application on our desk top computer it works fine however when the application is accessed on an iPad as soon as we get to the data heavy task safari just vaporizes .
Is this a limitation on imposed by Apple or are we getting punished for doing something wrong.
Try to load data as user request it:
http://podlipensky.com/post/2011/01/03/Sencha-Load-data-on-demand.aspx
http://www.sencha.com/forum/showthread.php?120083-Ext.ux.touch.LazyDataView
Also try to use lazy rendering for not-visible-from-start elements. You need to use xtype and json configuration instead of creating new instance of control.
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
I have to load a lot of data onto an iOS device with 128GB storage, for use by my app. The data is around 2,000 files of around 40Mb each, total is around 80GB - 100Gb.
I control the iOS device and the load machine/program and the local network they're on, and time is not critically important (if it takes a week to load, that's OK). I can format the data as required to facilitate the load.
I've done some iOS programming, but I'm not sure where to start looking for a solution to this. If you can outline the broad approach to use and which iOS docs to read up on, that's all I need.
Hoping for a solution where I can format the data and write the program, plug the iPad in to the Mac and say 'start loading' and come back when it's done.
We discovered that it is possible to load data one device at a time using iTunes, but that isn't a good answer for us.
We added a 'load data' button into the application. When triggered it loads a configuration file from a hard coded local network address, then retrieves all the data files listed in the configuration file using REST GETs from the local server, storing them into the application /Documents directory.
This is a good approach for us; it is secure, allows multiple devices to load data at the same time, and doesn't need any manual file loading : start the app, press 'load', and wait for it to finish.
So we have built an app that is almost completely dynamic.
You build the content on a website and then the app pulls the content that the administrators created for the user using a REST api.
The content can be videos, images, rich text, or form controls. All of this is stored externally on our servers...not locally.
We have hundreds of pages (kinda like a choose your own adventure).
We cache some stuff...usually about 3 - 5 pages at a time, but we don't store any content locally...we save to our server only.
So we noticed something weird while testing...when we go to Settings/General/Usage/Manage Storage we noticed our app keeps getting bigger and bigger. If we drill down into the app we can see that the app itself is only 15 megs, but as you use the app it can grow to over 100 Megs.
When we close the app out completely it will shrink down by about 20%, but somehow the app is keeping stuff and I am not sure why.
Does iOS cache things on its own? Is there a way to clear that on exit?
Again, we are purposefully not saving anything...but something obviously is.
Any thoughts?
Update
So I was asked more about the tech...it is a PhoneGap app that uses JQuery ajax calls to hit a .Net Web API project.
I don't mind caching while the app is running, but when the app has been closed by the user...why is there data being stored?
Thanks,
David
I'm having a problem with the app I'm building the RAM of the BB 9800 is too small.
I have a html5 application that I use in IOS and Blackberry.
I'm using phonegap plugin to pull data form server by using Sybase.
On IOS everything runs fine but on blackberry I frequently get a message "low on memory, please stop applications" and the only app running is mine. And usually this is followed by "app closing because its too big".
How can I either increase the memory available for my app (unlikely)
or decrease the amount my app is using (tips and guide lines)
I'm using:
Sencha Touch for our interface
Phonegap to access the native api
Sybase to do the sync between our local data and the server data
No toolkits - only one is sencha touch
everything is loaded at index.html - no ajax at all
index.html is a local file - no request loading
Sencha does the DOM stuff - not all screens in one main DOM - the screens are created on demand.
You mention you pull data from Sybase - is that when you get that memory error?
Unfortunately sencha/phonegap/sybase sync/your js will take memory (specially since it's all in one page), and those frameworks are big enough to cause troubles...
My suggestions:
if the error happens only when you load data, the question is how much data are you loading? maybe it's trying to download 1gb of data and trying to do that in memory? I would look into server-side paging to reduce your data-footprint
try to split into multiple .html pages each doing a subset of the work you are now doing in one big file...
Hope this helps
I develop an iPad application for a company. They want to use the application to show media, like pdf docs, pictures, video. They want one application for everything.
So I use a TabBar Application, each TabBar display a media, like pictures gallery, video gallery. The application is pretty big. And now the application is running slowly. The display of pdf is not smooth, the swich of tab takes time. I use the local data because I can use internet for the application, it needs to works everywhere without wifi.
So my question, is it a good idea to put everything in the same application? I add all my media in the xcode project.
Is the iPad good for displaying video, pdfs, pictures in the same application ? I want something smooth, but to much data for the memory kills my application. What ways I need to take ? Do you have ideas ?
It sounds like you are not purging media from memory when it is no longer used.
Make sure to release media related objects that are not immediately in use. Images in particular eat memory very quickly because all the data associated with an image has to been in memory. Unlike a PDF or audio file which can be read in as needed.
Users will expect and tolerate some slight delay switching from media type to media type because they experience that will all other apps and other forms of software. What they don't tolerate is slow performance while actively using a piece of media e.g. slow scrolling in a PDF file.