Arthy74
Visitor
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-20-2016
06:09 AM
RowList optimisation
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.
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.
6 REPLIES 6
sebastienc
Visitor
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-20-2016
10:18 AM
Re: RowList optimisation
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.
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
Visitor
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-20-2016
01:06 PM
Re: RowList optimisation
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.
(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.
TheEndless
Channel Surfer
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-20-2016
02:27 PM
Re: RowList optimisation
"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)
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
Arthy74
Visitor
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-20-2016
03:15 PM
Re: RowList optimisation
yes, i am just afraid i will have the same rendering issue on slow boxes...
Arthy74
Visitor
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-21-2016
05:47 AM
Re: RowList optimisation
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:
Roku 1:
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...
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...
Dhir_Pratap
Streaming Star
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-24-2016
05:23 AM
Re: RowList optimisation
"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?