This is a general request for information on how to optimize performance of web applications (not just in IE11). The application is done but it is EXTREMELY laggy, particularly towards the end of the 54-page app (uses lots of youtube, audio, graphics) and especially in IE11. Please note that my target audience will primarily be using IE so I can’t just tell them to use a different browser.
I am trying to determine why the app runs so much slower in IE11 and it seems to be related to RAM usage. For example, I have noticed that the RAM usage just before exiting the app is a lot higher in IE11 (800 M or higher) versus Chrome (250 M). Can anybody explain this? Memory leak in IE11? I do clean up previous unused pages but this doesn’t seem to help in IE11.
I just found out about F12 Developer Tools in IE11 which may help. There is a memory option which can take a snapshot and show all components open. One thing that seems to take the most memory is audio. Is there something I can do to release audio from RAM?
I have also tried disabling hardware acceleration but didn’t see much, if any, improvement.
I have ruled out Xojo Cloud (Small) performance issues because the app works tolerably well in Chrome.
No, I don’t think so (unless compatibility mode is on by default). I haven’t tried launching IE with add-ons disabled. I will also do an IE reset to defaults (tomorrow). I have already cleared browser cache.
Please note that there is always a slowdown, regardless of the browser, towards the end of the app. So, I think the bigger problem is just optimizing the whole app. The slowdown is just intolerable with IE.
Would splitting the app up into separate apps help?
I think the major slowdown is being caused by a combination of two factors: (1) RAM usage towards the end of the app and (2) downloading graphics. I have one page that downloads a bunch of JPGs (the page is reused multiple times but with different graphics) and if I don’t use this page (it is optional in the app) then there is no progressively increased slowdown as you progress through the app.
Any options for handling JPGs (short of buying a separate content server)? If I have to I will convert all the JPGs to text and figures/tables/piecharts.
That’s one possibility. There might be other problems as well.
[quote=128767:@Ken Gish]I think the major slowdown is being caused by a combination of two factors: (1) RAM usage towards the end of the app and (2) downloading graphics. I have one page that downloads a bunch of JPGs (the page is reused multiple times but with different graphics) and if I don’t use this page (it is optional in the app) then there is no progressively increased slowdown as you progress through the app.
Any options for handling JPGs (short of buying a separate content server)? If I have to I will convert all the JPGs to text and figures/tables/piecharts.
That’s one possibility. There might be other problems as well.[/quote]
If you have lots of pictures you may want to make sure they are used as URL instead of dragging them into the project. Speed gain is significant.
The UI for my web app is based on using images as buttons. I use WebImageViews throughout the app. I had issues with graphics loading slowly, but I significantly increased performance by doing the following.
In the Session Open event, I load all the images in from the folder structure and store them in WebPicture properties in the Session properties like this:
In all the ImageView Open events, I do code like this:
ImageView2.Picture = Session.picAddUser
The code for Load is below. It uses Preload to ask the browser to cache the image, again improving performance.
dim f as FolderItem = GetFolderItem(path, FolderItem.PathTypeNative)
if f <> nil then
dim w as WebPicture = new WebPicture(f)
call w.Preload
Return w
else
Return nil
end if
Hi Ken, I have quite a few images to load but am happy with the load time. The images only get loaded once, so as they are already in memory there is no lag in loading them again when going between pages.
I wanted to load images from the folder structure and this is the quickest I could get it. When in the app it is really fast. Preload gets the browser to cache the image so it will be displayed quicker the next time it is needed, I don’t know much more about it than that.
Session variables are for each current user, so you can store the user’s name, security level, and other properties for the user’s current session. App properties are shared by all users of the app at the same time. So,
Session.MyBoolean // will hold different values for each user
App.MyBoolean // will be the same value for all users
In the case we are talking about with the images, it may be good to store them as App properties. If you needed to change an image, though, and if the images are loaded in App.Open, the entire app would have to be brought down and restarted for the new image to take effect. By storing the images as Session properties as I do and loading them in Session.Open, each time a user logs into the app, they will see the image change straight away. This was important for me.
Maybe it’s similar. How is s defined in your example?
Using f = GetFolderItem(path, FolderItem.PathTypeURL) doesn’t work even though the URL is correct. Example format in path: http://domain.com/folder/image.jpg
PathTypeURL is for local paths that use the “file:///” prefix.
If you want to load the images in this manner, you’ll need to put them on your Xojo Cloud server (probably in the Documents folder of the web app) so you can access them using PathTypeNative.
Ken, s is the home folder name for the server that the app is running on. I have two different folder names, one for the development & testing app and one for the live. This makes it harder to copy files to the wrong folder. So I set the value of s to be the folder name for the app I am building.
I think your idea is going to work Eric. I am a little concerned about delay at app launch but I don’t think it will be too bad.
I liked using URLs to load pictures because I could construct the links easier. For example, picture name for particular combinations of variables could be created like this for ImageView.URL where WebPath is domain (plus folder to images) and var1 and var2 are text defining a filename:
me.URL = WebPath + var1 + var2 + “.jpg”
where var1 = “L1” and var2 = “M3” (var1 and var2 can be all combinations of 10 levels for var1 and 3 levels for var2)
Is there any way to construct the picture property using string? Something like this (I know this won’t work but not sure how to do it):
me.picture = (var1 + var2) as Session.property
Otherwise, I need a ton of if statements (which might slow things down).
I also liked URLs because it worked the same whether the app was running in the IDE or on the server. Guess I have to give that up.
Preloading helped somewhat. It only delays startup by about 10 seconds.
Also, now the images always load. In IE11 before doing preloading, sometimes it wouldn’t load the image or it was taking too long so I gave up waiting. Now, the image always gets displayed
Problem is, near the end of the app, it is still painfully slow.
Is there a limit on the number of “pages” there can be in a Xojo app?
