Your Digital Media Has Never Looked So Good

 
Arthy74
Topic Author
Posts: 28
Joined: Fri Jan 16, 2015 6:40 am

RowList optimisation

Thu Oct 20, 2016 6:09 am

Hi all,

I am trying to optimise our app as we are displaying like 12 rows (rowlist component), and for each row 6 items are visible (each row can contain more that 20 items)

Everything looks ok on Roku 3 and 4, but on earlier boxes the screen freezes during rows construction up to 20 seconds...


So i created a simple example to investigate:

My rowlist displays 6 items out of 20.
I know the rowlist smartly use a virtual layout to recycle row items, which is great.

BUT

apparently the rowList:
 - creates the 6 visible items (index 1 to 6) in memory
 - creates 6 cloned versions of these items
 - renders these 12 instances (itemContentChange is triggered)
 - creates 2 following items (item 7 and 8 ) in memory
 - renders those 2 following items

The expected result should be:
 - create 6 or 8 items in memory
 - only render the 6 visible items

On a roku stick or roku 1, all this extra work has a major impact in terms of performances.

And imagine this is only for 1 row, and we have 12 rows to render...

So is there any way not to render only the 6 visible items, or Roku can plan some serious optimisation on this component ?

I join the example so that you can see by yourself:
http://lecrabe.net/exchange/roku/TestRowList.zip
http://lecrabe.net/exchange/roku/TestRo ... ources.zip

Thanks if any of you who has found a workaround for this.
 
sebastienc
Posts: 3
Joined: Thu Aug 11, 2016 12:21 pm

Re: RowList optimisation

Thu Oct 20, 2016 10:18 am

The observed behavior for items in a row is usually desired and how you would go about it if implementing a row list component from scratch. In general, you want twice as many items as those visible on the screen for smooth scrolling and ensure any images are already pre-loaded before the item comes into view while scrolling.

There are two things you can try to improve performance:
- adjust "numRows" - the name of the field is confusing, but this is the number of rows that are rendered initially. Making this number small will increase initial load performance, but then will have a negative impact on performance while scrolling.
- on roku 2 and below, initially just set the number of rows that are visible on screen in the RowList and then slowly start appending additional rows to the RowList component.
Ensemble Systems - www.ensemble.com
 
Arthy74
Topic Author
Posts: 28
Joined: Fri Jan 16, 2015 6:40 am

Re: RowList optimisation

Thu Oct 20, 2016 1:06 pm

Well, in my example i want a single horizontal list, so i am using a rowList with 1 row (numRows = 1).
(other List components only scroll vertically)

I agree that we want double items as displayed in memory when you want to loop the row, however i dont see the point to render the items that are out of the screen.
 
User avatar
TheEndless
** Valued Community Member **
Posts: 9231
Joined: Mon Oct 04, 2004 10:15 am
Location: US
Contact:

Re: RowList optimisation

Thu Oct 20, 2016 2:27 pm

Arthy74 wrote:
Well, in my example i want a single horizontal list, so i am using a rowList with 1 row (numRows = 1).
(other List components only scroll vertically)

You can use a MarkupGrid with a "numRows" value set to 1. That will give you a horizontally scrolling list.
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
 
Arthy74
Topic Author
Posts: 28
Joined: Fri Jan 16, 2015 6:40 am

Re: RowList optimisation

Thu Oct 20, 2016 3:15 pm

yes, i am just afraid i will have the same rendering issue on slow boxes...
 
Arthy74
Topic Author
Posts: 28
Joined: Fri Jan 16, 2015 6:40 am

Re: RowList optimisation

Fri Oct 21, 2016 5:47 am

Good news everyone, 
MarkupGrid does the job better than RowList as predicted by TheEndless

I updated my example to build 20 rows of 100 items.
You can switch between Rowlist and MarkupGrid.

Are is the result of the benchmark to render the screen :
(i start the countdown as soon as the app starts, and stop when i see something on screen)

Roku 3:
  • Rowlist ->              1.5 secs
  • MarkupGrid ->       1 sec
Roku 1:
  • Rowlist ->              7 secs
  • MarkupGrid ->       14 seconds
That is a 50% performance increase !

NB: the Markup grid with 1 row correctly renders only the visible items, which is the best scenario.

Hope this example will help some of you.

NB2: the BIG counterpart is that i cannot use the floatingfocus anymore with a MarkupGrid made of 1 row...
Image
 
Dhir Pratap
Posts: 22
Joined: Wed Feb 17, 2016 4:32 am

Re: RowList optimisation

Mon Oct 24, 2016 5:23 am

TheEndless wrote:
You can use a MarkupGrid with a "numRows" value set to 1.  That will give you a horizontally scrolling list.

Is it possible to have similar horizontal scrolling behavior with more than 1 rows in markup grid?

Who is online

Users browsing this forum: No registered users and 13 guests