Performance problem in ScrollViewer

How-to Discussions
1

I have noticed some performance issues when I am using the ScrollViewer and using a Rectangle with Stroke in the list items. When running on device(iOS 8.4) and profiling the allocations seems to grow overtime. The scroll also get’s slower and laggy. But if I remove the Rectangle it seems to be working fine. Maybe it’s the way I am implementing the Recatangle?

<App Theme="Basic" ClearColor="#eeeeeeff">    <!-- Resources !-->
    <Font File="assets/fonts/Agenda Light.TTF" ux:Global="AgendaLight" />

    <DockPanel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var items = Observable();
            for (var i = 1; i <= 20; i++)
                items.add({label: "ITEM " + i});

            module.exports = {
                items: items
            };

        </JavaScript>
        <StatusBarBackground DockPanel.Dock="Top" />
        <ScrollViewer ClipToBounds="true">
            <StackPanel Padding="20,20">
                <Each Items="{items}">
                    <Panel Height="72" Margin="0,10" Background="#FFFFFF">                        <Rectangle >
                            <Stroke Width="2">
                                <SolidColor Color="#CCCCCC"/>
                            </Stroke>
                        </Rectangle> 
                    <Text Value="{label}" Font="AgendaLight" Alignment="CenterLeft" Padding="20" TextColor="#000000"/>
                </Panel>
                </Each>
            </StackPanel>
        </ScrollViewer>
    </DockPanel>
</App>
2

Hm, you might be hitting some corner case. We have tested enormous scrolling lists with all sorts of shapes and controls without problems.

Thanks for the test case, we will investigate!

3

No problems, glad I could help :slight_smile:

4

I’ve had a small look, and it seems that you’ve managed to trigger a couple of bugs in some new code. Sorry about that!

What happens, is that since there’s more than 10 direct child-elements of the StackPanel, so we try to batch the elements for performance reasons. However, after we batched them, we’re not really that happy about the result of the batching. This is because the elements are relatively large.

So what happens, is we re-try to batch the next frame, and end up with the same result. Next frame, same story.

This part is your performance problem, we simply re-do the job over and over again.

But in this, it also seems we have a memory-leak, that just keeps accumulate memory until you run out. Not good. This only happens when the element-batching kicks in.

The only work-around I can think of, is to force-disable the caching, by setting CachingMode="Never" on the Panel containing the Rectangle. This works around both issues for me.

I’ll make sure to get both issues fixed properly soon. Sorry for the inconvenience.

5

No worries, looking forward to the next release. Keep up the good work!

6

Just a quick update. Fixes for both those issues will be included in the upcoming release.