ContentCache

[bilbosax <wa...@comcast.net>]

In my AIR app, I am having to download a lot of images to display, especially
in lists.  I need a good tutorial on how to cache these images using
ContentCache, but am having trouble finding any solid examples on the net. 
Does anyone know of a good place to find out how to effectively use
ContentCache in an AIR app??

Thanks!



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/

Re: ContentCache

[Javier Guerrero García <ja...@gmail.com>]

Yes, that's it, and it can certainly improve network performance too.
Imagine you have a list (not using virtualRenderers) with 2000 images. Do
you want your mobile to open 2000 http connections and try to load 2000
images at once? That would take a while, and it's much faster (both
visually and timely) to download only 3-4 at a time: that's what queueing
does :) (there's was a maxActiveRequests with a default of 2 somewhere
alongside with the enableQueueing). Plus, http servers usually limit the
maximum number of connections per client, so if you do 2000 request most of
them will timeout and fail, or just get rejected.

When using virtualRenderers (and depending on your content size), it might
as well be useful, since you can control the queue and cancel the download
if the item has gone offscreen (that HUGE gif animation you skipped up must
stop hogging your bandwidth, since it's more important to load now the
beautiful and tiny JPG you are looking at). Destroying / recycling the
virtualRenderer doesn't mean the connection to download it's content is
also stopped/canceled as well. Have a look at activeRequests and
requestQueue lists on runtime to get an idea :) (and even to priorities for
prioritizing some contents above others in the queue).

Hope it helps :)

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/core/ContentCache.html#activeRequests

On Fri, Sep 1, 2017 at 1:51 AM, Erik J. Thomas <er...@linqto.com> wrote:

> Hey bilbosax:
>
> I've never used queueing functionality and you're right there's not much
> written about it. But by the properties you can set it appears that you can
> limit the number of simultaneous loads to reduce bandwidth demands. I don't
> see much use for that myself.
>
> Cheers,
>
> Erik
>
> On Aug 31, 2017, at 3:11 PM, bilbosax <wa...@comcast.net> wrote:
>
> Thanks Erik!  I have got things underway and am already seeing
> improvements,
> but I have a lot more tweaking to do.
>
> Do you have any idea what the enableQueing function does in the
> contentCache?  The documentation is a little bit vague
>
>
>
> --
> Sent from: http://apache-flex-users.2333346.n4.nabble.com/
>
>
>

Re: ContentCache

["Erik J. Thomas" <er...@linqto.com>]

Hey bilbosax:

I've never used queueing functionality and you're right there's not much written about it. But by the properties you can set it appears that you can limit the number of simultaneous loads to reduce bandwidth demands. I don't see much use for that myself.

Cheers,

Erik

On Aug 31, 2017, at 3:11 PM, bilbosax <wa...@comcast.net> wrote:

Thanks Erik!  I have got things underway and am already seeing improvements,
but I have a lot more tweaking to do.

Do you have any idea what the enableQueing function does in the
contentCache?  The documentation is a little bit vague



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/

Re: ContentCache

[bilbosax <wa...@comcast.net>]

Thanks Erik!  I have got things underway and am already seeing improvements,
but I have a lot more tweaking to do.

Do you have any idea what the enableQueing function does in the
contentCache?  The documentation is a little bit vague



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/

Re: ContentCache

["Erik J. Thomas" <er...@linqto.com>]

Here is a great article on improving list performance in mobile flex apps. The CacheContent approach is about 2/3 down the page with source code examples. There are other great things you can do in this article.

https://www.adobe.com/devnet/flex/articles/flex-mobile-performance-checklist.html <https://www.adobe.com/devnet/flex/articles/flex-mobile-performance-checklist.html>

Oh, and I assumed by AIR app, you were talking about a mobile app. I haven't tried this on a desktop AIR app, but don't see why it wouldn't work the same way.

Erik

Erik Thomas
Chief Architect
Office: 541.247.2995 / Mobile: 303.304.1466



http://linqto.com <http://linqto.com/>

This email may contain confidential and privileged material for the sole use of the intended recipient. Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.

On Aug 31, 2017, at 1:57 PM, Erik J. Thomas <er...@linqto.com> wrote:

Hey bilbosax:

It's pretty simple to improve the performance of large lists with images. You do this in ItemRenderers:

1. Add ItemRenderer.cacheAsBitmap="true". This also caches all the content as a snapshot for performance. If you will have data changing in the renderer a lot, then you don't need to set this to true, but it's a good idea if performance is an issue.

2. Add a ContentCache class variable (I named mine iconCache):

static private const iconCache:ContentCache = new ContentCache();

2. Set iconCache.maxCacheEntries to the max number you'll need to cache in initialize handler.

3. Assign <your image>.contentLoader = iconCache in ItemRenderer.initialize handler.

That's it, you use this approach when rendering remote images with a URL since this approach is unnecessary when using embedded assets that are already cached.

So the first time a remote image is pulled with URL (assigning Image.source to URL of an image), it is automatically cached so it doesn't have to be loaded again which happens when scrolling as the item renderer instances are reused.

Another approach for smooth scrolling of large lists is to use DataGroup which doesn't recycle item renders but keeps them all alive but the downside is the initial rendering of the list will be slow, but after that the performance will be exceptional. Just depends on whether you want initial up front pain or jerky scrolling the first time through a list.

Another tip is to load your ArrayCollection before you assign the list's dataProvider, or if you're using data binding for the lists dataProvider property, when loading the underlying data, turn off autoUpdate in the ArrayCollection to prevent cascading rendering which can be quite slow.

arrayCollection.disableAutoUpdate();
// Load your collection from REST API for example
arrayCollection.enableAutoUpdate();
arrayCollection.refresh(); // to update the displayList.

Hope this helps.

Erik

Erik Thomas
Chief Architect
Office: 541.247.2995 / Mobile: 303.304.1466

<PastedGraphic-1.tiff>

http://linqto.com <http://linqto.com/>

This email may contain confidential and privileged material for the sole use of the intended recipient. Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.

On Aug 30, 2017, at 4:51 PM, bilbosax <waspence41@comcast.net <ma...@comcast.net>> wrote:

In my AIR app, I am having to download a lot of images to display, especially
in lists.  I need a good tutorial on how to cache these images using
ContentCache, but am having trouble finding any solid examples on the net. 
Does anyone know of a good place to find out how to effectively use
ContentCache in an AIR app??

Thanks!



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/ <http://apache-flex-users.2333346.n4.nabble.com/>

Re: ContentCache

["Erik J. Thomas" <er...@linqto.com>]

Hey bilbosax:

It's pretty simple to improve the performance of large lists with images. You do this in ItemRenderers:

1. Add ItemRenderer.cacheAsBitmap="true". This also caches all the content as a snapshot for performance. If you will have data changing in the renderer a lot, then you don't need to set this to true, but it's a good idea if performance is an issue.

2. Add a ContentCache class variable (I named mine iconCache):

static private const iconCache:ContentCache = new ContentCache();

2. Set iconCache.maxCacheEntries to the max number you'll need to cache in initialize handler.

3. Assign <your image>.contentLoader = iconCache in ItemRenderer.initialize handler.

That's it, you use this approach when rendering remote images with a URL since this approach is unnecessary when using embedded assets that are already cached.

So the first time a remote image is pulled with URL (assigning Image.source to URL of an image), it is automatically cached so it doesn't have to be loaded again which happens when scrolling as the item renderer instances are reused.

Another approach for smooth scrolling of large lists is to use DataGroup which doesn't recycle item renders but keeps them all alive but the downside is the initial rendering of the list will be slow, but after that the performance will be exceptional. Just depends on whether you want initial up front pain or jerky scrolling the first time through a list.

Another tip is to load your ArrayCollection before you assign the list's dataProvider, or if you're using data binding for the lists dataProvider property, when loading the underlying data, turn off autoUpdate in the ArrayCollection to prevent cascading rendering which can be quite slow.

arrayCollection.disableAutoUpdate();
// Load your collection from REST API for example
arrayCollection.enableAutoUpdate();
arrayCollection.refresh(); // to update the displayList.

Hope this helps.

Erik

Erik Thomas
Chief Architect
Office: 541.247.2995 / Mobile: 303.304.1466



http://linqto.com <http://linqto.com/>

This email may contain confidential and privileged material for the sole use of the intended recipient. Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.

On Aug 30, 2017, at 4:51 PM, bilbosax <wa...@comcast.net> wrote:

In my AIR app, I am having to download a lot of images to display, especially
in lists.  I need a good tutorial on how to cache these images using
ContentCache, but am having trouble finding any solid examples on the net. 
Does anyone know of a good place to find out how to effectively use
ContentCache in an AIR app??

Thanks!



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/