flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Erik J. Thomas" <e...@linqto.com>
Subject Re: ContentCache
Date Thu, 31 Aug 2017 21:24:24 GMT
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 <erik@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 <mailto:waspence41@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/>




Mime
View raw message