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 ?
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.
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.
“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.
“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?
