I’ve uploaded a demo project that has 256 buttons on a web page.
Each button is implemented as a two state WebImageView.
I need to be able to optimize the time it takes to load this web page and update.
Each button has two states up and down. There is a different picture for each state.
As all the buttons share the same images the images themselves are Shared Properties of the class.
Can you see if you can help me optimize this? It’s too slow.
I’ve uploaded the project here.
There are two images that you will need as well:
The slowness is due to the way you’re constructing these. Using 256 WebContainers, each with their own EmbedWithin is going to be slow no matter what.
I have 256 webCheckBoxes each in a webContainer and it is instantaneous.
Well, for one thing, the browser needs to retrieve each of those images… and looking at your project, you’re killing yourself with how you’re specifying the image. Here’s what I think is going on:
- Open event fires (you check and create shared image properties)
- Open event sent to browser
- Shown event fires (you set the webimageview images). This generates the HTML for those images.
- HTML sent to browser (Browser now needs to request the image for all of those images.)
- Browser sends 256 image requests
- Web app responds to 256 image requests
I’ve profiled your app in my browser and it looks like the browser isn’t taking advantage of the cache because the folder image isn’t already on the browser when the requests are made.
Move this code:
if mIsExpanded then
ImageView1.Picture = WPOpen
ImageView1.Picture = WPClose
To the Open event after the code you have there now. it’ll be much faster because you eliminate en entire event loop.
Thanks for the help. I’ve tried your suggestion but I don’t notice any difference.