Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fa-scroll-view, watchers and poor performance #347

Open
5inline opened this issue Mar 4, 2015 · 3 comments
Open

fa-scroll-view, watchers and poor performance #347

5inline opened this issue Mar 4, 2015 · 3 comments

Comments

@5inline
Copy link

5inline commented Mar 4, 2015

In fa-scroll-view, as I add more items, the scrolling slows until it becomes unusable or generates a memory error.

Here is the FA code I'm using.

<fa-view id="library_list_view">
    <fa-modifier fa-translate="list.layout.container.translate">
        <fa-scroll-view id="library_list_scroll_view" fa-options="list.layout.scroll.options" fa-pipe-from="list.scrollHandler">
            <fa-modifier fa-size="list.layout.list.size" fa-translate="list.layout.list.translate">

                <fa-grid-layout fa-options="list.layout.grid.options">

                    <fa-view data-ng-repeat="(index,lesson) in list.lessons track by $index" fa-index="index">

                        <fa-surface class="list-item library-list-item" fa-pipe-to="list.scrollHandler" data-fa-tapp="list.lessonClick(lesson)">
                            <div class="library-list-item-image" data-bg-src="{{::lesson.image}}"></div>
                            <div class="library-list-item-title" data-ng-bind="::lesson.title"></div>
                            <div class="library-list-item-instructor" data-ng-bind="::lesson.educator.name"></div>
                        </fa-surface>

                    </fa-view>

                </fa-grid-layout>

            </fa-modifier>
        </fa-scroll-view>
    </fa-modifier>
</fa-view>

Changing the layouts between fa-grid-layout or fa-sequential-layout or no layout wrapper did not seem to affect performance either way.

It seems like each item generates 2 watchers as well. So, if I have 40 items, I get 80 watchers, regardless of the content inside of the ng-repeat. Is this expected behavior, or is it my code? Is there something that can be optimized?

@5inline
Copy link
Author

5inline commented Mar 5, 2015

Switching to a more "vanilla" famo.us directive, the scroll view operates as expected, hiding/showing elements while scrolling to maintain performance.

View here for reference:
http://viz-co.de/scrollviews-performance/

This is a pretty big issue with famous-angular. Being able to have a performant scrollview is one of the main cornerstones of famo.us.

@steveblue
Copy link
Contributor

@5inline check out this gist for a ScrollHandler. https://gist.github.com/steveblue/4016a5e09837bf213975

If there is something not working as expected, you can just roll your own module.

@5inline
Copy link
Author

5inline commented Mar 15, 2015

Thanks, I mostly understand, but what would be the best way to integrate with Famous-Angular?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants