How to optimize performance of data Image URLs

[Mohamed Mansour]

Hello,

When I am using a Canvas, the resulting size of the large image is 1.5MB. I am creating a gallery of large images so the user can view each image on the client side. I only create a single Image tag and just change the src attribute to the data url. Every time I change the src attribute, the browser caches the image in the resources tab (within inspector) causing the web app to slow down significantly.

The more I flick through the gallery, the slower the client app would be. That is because it is keeping the 1.5MB image in its resources from looking at the inspector. How do I free up resources so that I keep at max 5 images and dispose the others.

The memory of my extension is creeping up every time I add another image. It jumps from 30MB to 300MB when viewing 20 imageDataURls. Is there a way I could solve this?

Kind regards,
Mohamed Mansour

[Joshua Woodward]

Create multiple image elements maybe. Not sure if that would help if you kept track of your assets and used appendChild, removeChild.

--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.

[Mohamed Mansour]

I tried before creating Image elements and then disposing it (removeChild), still the huge jump in memory. I checked the resources tab and it is showing all of them.

Kind regards,
Mohamed Mansour

[Mohamed Mansour]

Even when I visit the same image as a data Image URI, it reserves more memory. It looks like this:

Kind regards,
Mohamed Mansour

[Eric Bidelman]

+scottmg

This could be a regression of crbug.com/36142. That was fixed last year,

but I see webk.it/78794 was recently opened.

--
Eric Bidelman | Senior Developer Programs Engineer | e.bid...@google.com 

[Mohamed Mansour]

Hey Eric,

I was doing more testing, it seems when the Web Inspector is open, it leaks memory like crazy. It seems it doesn't leak when the inspector is closed. I will be doing more testing to see what the problem is.

Kind regards,
Mohamed Mansour

[Nico Weber]

Hi m0,

On Sun, Feb 26, 2012 at 3:40 PM, Mohamed Mansour <m...@chromium.org> wrote:

Hey Eric,

I was doing more testing, it seems when the Web Inspector is open, it leaks memory like crazy. It seems it doesn't leak when the inspector is closed. I will be doing more testing to see what the problem is.

Can you try to find a repro case for this, and then file a bug?

Thanks,

Nico

[Mohamed Mansour]

Hey Nico! 

I filed the reduction here: http://crbug.com/115965

Scott, for my test cases, it only when the inspector is opened. When building a complex app that has images and debugging it, becomes impossible. 

I am not familiar with the the tracking of the web inspector, Is it by design that the resources tab should keep track of all images? For example, the reduction I attached in the bug above duplicates the same image in the resource over and over again, I reached 400MB, I could have reached 1GB as well. It keeps track of the historical images as well which were set before in the same session.

Kind regards,
Mohamed Mansour

On Mon, Feb 27, 2012 at 1:48 PM, Scott Graham <sco...@chromium.org> wrote:

On Mon, Feb 27, 2012 at 9:35 AM, Nico Weber <tha...@chromium.org> wrote:

Hi m0,

On Sun, Feb 26, 2012 at 3:40 PM, Mohamed Mansour <m...@chromium.org> wrote:

Hey Eric,

I was doing more testing, it seems when the Web Inspector is open, it leaks memory like crazy. It seems it doesn't leak when the inspector is closed. I will be doing more testing to see what the problem is.

Can you try to find a repro case for this, and then file a bug?

 

If it is really only when Inspector is open, is it just that it keeps a log of all data URIs? If that's what it is, then it might not really be a leak exactly, just very large space usage from tracking all of that?