Using cached images in sfListView / GridLayout performance

[Russ Fustino]

Does the SyncFusion ListView 15.1.0.33  derive from the Xamarin Forms ListView? If so, is there a new property available called “CachingStrategy=RecycleElement”  or an equivalent as was recently made available with Xamarin Forms ListView? I am trying to reduce load time on a ListView page initially and on subsequent loads. I am seeing 4-12 seconds, depending on the tablet device  Grid Layout ListView for loading and 2-6 seconds for re-loading depending on the tablet device. I have about 60 images in the ListView, each are 160x160 thumbnail png files, I am using 5 columns wide. Total size of all 60 thumbnails is 900 KB. Runs fine in the Visual Studio emulator BTW, just seeing the delays when deployed to actual device. I have set my Android options to Max Java Heap Sixe to 1G. If you think of any other settings that impact this please let me know as well as if .png vs .jpg has an impact on performance.

I have tried to cache Images with the latest sfListView control  using the FFImageLoading NuGet Package https://github.com/luberda-molinet/FFImageLoading , but the app is crashing with a runtime error: System.Threading.Tasks.TaskCanceledException: A task was canceled .

It works with a non-SyncFusion ListView and it runs when I use a regular image control . Here is my XAML below and the image files are accessed in the head project (IE not embedded resources in the PCL) . Or are there any other cached images plug-ins of Sf caching image controls that work with sfListView?

In Main Activity

        CachedImageRenderer.Init();

XAML in PCL

             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"

...

              <ffimageloading:CachedImage
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                Aspect="AspectFit"                             
                DownsampleToViewSize="true"
                Source="{Binding thumb_file_image_name} Converter={StaticResource ImageConverter}"
                                          >
              </ffimageloading:CachedImage>

[Dinesh Babu Yadav]

Hi Russ, 

 

Thank you for contacting Syncfusion support. 

 

Query 1: 

SfListView is completely developed with UI Virtualization(Item recycling) concept and it only creates the element only which are in view on initial loading. While scrolling, we have cache the created elements and recycled it by updating only the BindingContext of the SfListView item. However, when multiple images are loaded in SfListView and deployed in android platform, the images are rendered by the native android renderer, so it takes some time to create the view completely and leads some performance degradation on scrolling. Hence, we have tried to achieve your requirement for better loading of images upon scrolling by customizing the Xamarin.Forms.Image in our sample. We have attached the sample for your reference and you can download a copy of it from the below link.  

     

Sample: http://www.syncfusion.com/downloads/support/forum/129106/ze/ListViewSample-410083399  

 

Could you please check with the above sample? If the issue still reproduces at your end, please modify the above sample to reproduce the issue and update us with replication procedure or video link. So, that we can analyze the issue and update an appropriate solution. 

 

Query 2: 

Currently we are working on the reported “Runtime error(TaskCanceledException) throws when SfListView is loaded” issue and a support incident has been created under your account to track the status of this report. Please log on to our support website to check for further updates.      

   

Link: https://www.syncfusion.com/account/login  

Please let us know if you need any further assistance. 

 

Regards, 

Dinesh Babu Yadav  

 

[Russ Fustino]

I got to tell you, your samples and Forum solutions are excellent. Thank you for taking the time to do such quality work. And I am very happy to hear SfListView is completely developed with UI Virtualization(Item recycling) concept. Excellent. I modified the sample you provided to start with a navigation page so I can easily differentiate between app load time and navigating to a page with the list view. I  an I am seeing decent response time on this sample. On my 7inch Kindle Fire running I am running Fire tablet OS 4.5.5.2 , I am seeing 4 second load time and 1 second reload. Similar results on my HP 10 Plus inch tablet running Android version 4.4.2 4 second load, 2 second reload . When I run my own app on the Kindle I am seeing about the same timings. However, I am seeing about 6 second on the HP for load and 2 second for reload. The 6 second load is a bit much. I am using .png in my app, does that make a difference in Android vs .jpg like you have in the example? That is about the only difference I can pick out easily. I have been doing these timings in debug mode, so I am guessing release mode will be even better. Any other ideas for tweaks on the performance here? On another note, I read where in Android you need to dispose of the image as it will not be disposed of automatically which will lead to memory problems. Is that an issue here with prolonged image use or do you dispose of properly in this sample or does the item recycling take care of that?  Keep up the great work! Much appreciate.

Attachment: ListViewSampleWithNavigation_519ce377.zip

[Dinesh Babu Yadav]

Hi Russ, 

  

We are analyzing the reported issue “Improving the loading performance in SfListView with images” at our end and we would like to let you know that we are updating the binding context of the ListViewItem only and we are unable to disposing the native objects while reusing the items. We need some more time to validate this issue with Xamarin Profiler to check the memory leak while scrolling the images and will update the further information on or before March 8, 2017. 

  

Please let us know if you require further assistance. 

  

Regards, 

Dinesh Babu Yadav 

[Neil Cadman]

Hi,

I also get issues with the ListView (using the latest version, 17.2.0.39) when images are inside the control. If I flick the list so that is scrolls quickly I get the following errors appearing in my output and the image no longer shows to the user.

It looks like its possible android is killing the socket because it's killing a thread due some recycle action - possibly due to the scroll speed its still recycling the cell which left the users view and so it's cancelling the image load but by the time this runs it's cancelling the action of the "real" cell, the one the user should now see?

[0:] Image Loading: Error getting stream for https://test-androweb.azureedge.net/tenant/..........-d2f1-42d3-a42a-c6dcc550f74b/images/product/248.jpg: System.OperationCanceledException: The operation was canceled.

  at System.Threading.CancellationToken.ThrowOperationCanceledException () [0x00010] in <ff07eae8184a40a08e79049bbcb31a0e>:0 

  at System.Threading.CancellationToken.ThrowIfCancellationRequested () [0x00008] in <ff07eae8184a40a08e79049bbcb31a0e>:0 

  at Xamarin.Android.Net.AndroidClientHandler.DoProcessRequest (System.Net.Http.HttpRequestMessage request, Java.Net.URL javaUrl, Java.Net.HttpURLConnection httpConnection, System.Threading.CancellationToken cancellationToken, Xamarin.Android.Net.AndroidClientHandler+RequestRedirectionState redirectState) [0x0042f] in <a2f1be6565a84d5393d8f9efa19f479b>:0 

  at Xamarin.Android.Net.AndroidClientHandler.SendAsync (System.Net.Http.HttpRequestMessage request, System.Threading.CancellationToken cancellationToken) [0x002be] in <a2f1be6565a84d5393d8f9efa19f479b>:0 

  at System.Net.Http.HttpClient.SendAsyncWorker (System.Net.Http.HttpRequestMessage request, System.Net.Http.HttpCompletionOption completionOption, System.Threading.CancellationToken cancellationToken) [0x000e8] in <bded3dbf44d946c7ba5980c587dca714>:0 

  at Xamarin.Forms.Forms+AndroidPlatformServices.GetStreamAsync (System.Uri uri, System.Threading.CancellationToken cancellationToken) [0x0003b] in D:\a\1\s\Xamarin.Forms.Platform.Android\Forms.cs:646 

  at Xamarin.Forms.UriImageSource.GetStreamAsyncUnchecked (System.String key, System.Uri uri, System.Threading.CancellationToken cancellationToken) [0x001f7] in D:\a\1\s\Xamarin.Forms.Core\UriImageSource.cs:176 

[0:] Image Loading: Error getting stream for https://test-androweb.azureedge.net/tenant/d3626aa5-d2f1-42d3-a42a-c6dcc550f74b/images/product/92.jpg: Java.Net.SocketException: Socket closed

  at Java.Interop.JniEnvironment+InstanceMethods.CallIntMethod (Java.Interop.JniObjectReference instance, Java.Interop.JniMethodInfo method, Java.Interop.JniArgumentValue* args) [0x00069] in <23e57773773243b6853e76fc01957c33>:0 

  at Java.Interop.JniPeerMembers+JniInstanceMethods.InvokeVirtualInt32Method (System.String encodedMember, Java.Interop.IJavaPeerable self, Java.Interop.JniArgumentValue* parameters) [0x0002a] in <23e57773773243b6853e76fc01957c33>:0 

  at Java.Net.HttpURLConnection.get_ResponseCode () [0x0000a] in <a2f1be6565a84d5393d8f9efa19f479b>:0 

  at Xamarin.Android.Net.AndroidClientHandler+<>c__DisplayClass46_0.<DoProcessRequest>b__1 () [0x00000] in <a2f1be6565a84d5393d8f9efa19f479b>:0 

  at System.Threading.Tasks.Task`1[TResult].InnerInvoke () [0x0000f] in <ff07eae8184a40a08e79049bbcb31a0e>:0 

  at System.Threading.Tasks.Task.Execute () [0x00000] in <ff07eae8184a40a08e79049bbcb31a0e>:0 

--- End of stack trace from previous location where exception was thrown ---

  at Xamarin.Android.Net.AndroidClientHandler.DoProcessRequest (System.Net.Http.HttpRequestMessage request, Java.Net.URL javaUrl, Java.Net.HttpURLConnection httpConnection, System.Threading.CancellationToken cancellationToken, Xamarin.Android.Net.AndroidClientHandler+RequestRedirectionState redirectState) [0x0036c] in <a2f1be6565a84d5393d8f9efa19f479b>:0 

  at Xamarin.Android.Net.AndroidClientHandler.SendAsync (System.Net.Http.HttpRequestMessage request, System.Threading.CancellationToken cancellationToken) [0x002be] in <a2f1be6565a84d5393d8f9efa19f479b>:0 

  at System.Net.Http.HttpClient.SendAsyncWorker (System.Net.Http.HttpRequestMessage request, System.Net.Http.HttpCompletionOption completionOption, System.Threading.CancellationToken cancellationToken) [0x000e8] in <bded3dbf44d946c7ba5980c587dca714>:0 

  at Xamarin.Forms.Forms+AndroidPlatformServices.GetStreamAsync (System.Uri uri, System.Threading.CancellationToken cancellationToken) [0x0003b] in D:\a\1\s\Xamarin.Forms.Platform.Android\Forms.cs:646 

  at Xamarin.Forms.UriImageSource.GetStreamAsyncUnchecked (System.String key, System.Uri uri, System.Threading.CancellationToken cancellationToken) [0x001f7] in D:\a\1\s\Xamarin.Forms.Core\UriImageSource.cs:176 

  --- End of managed Java.Net.SocketException stack trace ---

java.net.SocketException: Socket closed

at com.android.org.conscrypt.NativeCrypto.SSL_read(Native Method)

at com.android.org.conscrypt.NativeSsl.read(NativeSsl.java:399)

at com.android.org.conscrypt.ConscryptFileDescriptorSocket$SSLInputStream.read(ConscryptFileDescriptorSocket.java:546)

at com.android.okhttp.okio.Okio$2.read(Okio.java:136)

at com.android.okhttp.okio.AsyncTimeout$2.read(AsyncTimeout.java:211)

at com.android.okhttp.okio.RealBufferedSource.indexOf(RealBufferedSource.java:306)

at com.android.okhttp.okio.RealBufferedSource.indexOf(RealBufferedSource.java:300)

at com.android.okhttp.okio.RealBufferedSource.readUtf8LineStrict(RealBufferedSource.java:196)

at com.android.okhttp.internal.http.Http1xStream.readResponse(Http1xStream.java:186)

at com.android.okhttp.internal.http.Http1xStream.readResponseHeaders(Http1xStream.java:127)

at com.android.okhttp.internal.http.HttpEngine.readNetworkResponse(HttpEngine.java:762)

at com.android.okhttp.internal.http.HttpEngine.readResponse(HttpEngine.java:634)

at com.android.okhttp.internal.huc.HttpURLConnectionImpl.execute(HttpURLConnectionImpl.java:482)

at com.android.okhttp.internal.huc.HttpURLConnectionImpl.getResponse(HttpURLConnectionImpl.java:418)

at com.android.okhttp.internal.huc.HttpURLConnectionImpl.getResponseCode(HttpURLConnectionImpl.java:549)

at com.android.okhttp.internal.huc.DelegatingHttpsURLConnection.getResponseCode(DelegatingHttpsURLConnection.java:105)

at com.android.okhttp.internal.huc.HttpsURLConnectionImpl.getResponseCode(HttpsURLConnectionImpl.java:26)

[Sangeetha Raju]

Hi Russ, 

  

We have analyzed the reported stack trace and found that there is no flow from SfListView has been detected. So can you please provide us with a simple sample which helps to analyze further from our side. 

  

Regards, 

Sangeetha Raju.