Question about Chrome image caching

[Jānis Taranda]

Hi. I have a question about how chrome caches images. As I understand there are 2 levels. 

Level 1 is that image is downloaded in saved in some TMP directory. So next time accessed with same name, it does not have to reload from remote source.

Level 2 is that image is being cached in RAM? If "Yes", when is it done? And when is the cleared?

== Why I'm asking?!

I'm working on some animated (via CSS) content, that has medium size backgrounds. Despite that the some content is display: none, I can see in "network" tab, that background images are pre-loaded.. however when display:none is replaces with display:whatever_visible, I experience HUGE lag. However, on next cycle, going to display:none and back to visible again, the LAG is gone. So I suspect the lag is while loading image from HDD and pushing to RAM for first time. 

What do u think?

[Primiano Tucci]

IIRC that the RAM happens in the renderer process in the WebCache. While the disk cache is handled by the browser process.

Image caching, though, is a pretty complex topic, as the decoding plays a big role.

At various points in time an image can be "cached" as in "the bytes of the compressed JPEG are in memory, but not the decoded bitmap" or "both the bytes of the comrpessed JPEG and the decoded bitmap are in memory" or just the decoded bitmap.

The heuristics that decide whether the compressed bytes should stay in memory should be handled by the WebCache.

The heuristics that decide whether the decoded image is kept in memory are OS-dependent (we use ephemeral memory when available, which is auto-purged by the OS in case of memory pressure).

I think that the decode doesn't happen if the image is not visible, as that should be triggered by the compositor. So that lag you see might be due to the first deconding.

A good way would be using chrome://tracing and see what's happening there.

See https://www.chromium.org/developers/how-tos/trace-event-profiling-tool

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

[Jānis Taranda]

Thanks for the detailed explanation. I will look in tracing, etc. In mean time, do you have any on-hand tips, how I can avoid this LAG - some CSS or JS (preload?) trick that would work? Or this not thing I can force from client side?

Best, Janis

[Primiano Tucci]

If the problem turns out to be the first JPEG decoding, did you try opacity: 0 ? Maybe that forces the decoder. Or maybe the compositor is too smart, dunno really.

Even if it works won't rely on that though.

Out of cusiosity how much lag are we talking about? JPEG decoding shouldn't take more than ~hundreds ms unless the image is gigantic (or the cpu is super slow)

[Jānis Taranda]

It is a UNDER SECOND lag. But is very notable in a animated scene. And after that, the next scene comes with diff backgrounds, and again same. So overall the experience is lagy (the hardware is also not the best). By posting the question here, I hoped for some tehn. to pre-cache/pre-decode those images for fast accessing when actually displayed.

I will try to replace display: none, with opacity:0, but don't think it will help. I heard that opacity 0 objects are also ignored by rendered, etc. I could set 0.001 opacity, but than I run into other performance problems, because Chrome will than treat it as an another composite layer.

Thanks!

, I 

[Nance, Aaron]

Have you tried loading the images using JavaScript and an onload listener? 

Simple and not at all optimized example: 

var imageArr = [];

var imagePaths = [ "pathToImage1", "pathToImage2", ... ];

var imagesLoaded = 0;

for( var i = 0; i < imagePaths.length; i++ ) {

    imageArr.push( new Image() );

    imageArr[i].onload = onImageLoad;

    imageArr[i].src = imagePaths[i];

}

function onImageLoad( e ) {

     imagesLoaded++;

     if( imagesLoaded == imagePaths.length ) {

           // all images loaded, start animating. 

     }

}

I use an approach like this when I'm drawing to a canvas to make sure all the resources are ready. Doing this from memory, so there may be a few syntax errors in there. :-)

    

---
You received this message because you are subscribed to the Google Groups "Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discuss+unsubscribe@chromium.org.

--

Aaron Nance

Software Developer

Assessment & Instruction

Pearson

E: aaron...@pearson.com

Pearson

Always Learning

Learn more at www.pearsonk12.com

[Jānis Taranda]

This only caches images in tmp dir chrome://cache/, so there is no delay when loading from remote URL. Or someone can prove me wrong.

Best, Janis

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discu...@chromium.org.