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

Performance drops after re-rendering multiple times #176

Closed
Rex90 opened this issue Aug 3, 2016 · 5 comments
Closed

Performance drops after re-rendering multiple times #176

Rex90 opened this issue Aug 3, 2016 · 5 comments

Comments

@Rex90
Copy link

Rex90 commented Aug 3, 2016

I'm using ngHandsontable inside a tabbed ui-router app. The first time I load a tab (state/route) and the tables are rendered (i have 5-10 tables in 1 view) the performance is excellent. However, once I navigate away from this view into other views (that may or may not have more handsontables), the repsonsiveness of the tables is massively declined. Cant tell what the issue is but Im thinking maybe the watch variables are not being cleaned?

This is how Im using it (with the jquery masonry plugin to stack the tables)


        <div class="row">
            <div class="col-md-12">
                <div masonry>
                    <div class="masonry-brick" ng-repeat="(title, group) in instrumentGroups | orderObjectBy:'sortOrder'" style="" column-width="230">
                        <div class="instrument-group">

                            <hot-table settings="{colHeaders: colHeaders, className: 'htCenter', contextMenu: ['row_above', 'row_below', 'remove_row'], afterChange: hot.afterChange, afterRender: hot.afterRender}" row-headers="false" min-spare-rows="minSpareRows" datarows="group.nodes" >
                                <hot-column data="nodeTitle" title="group.title" width="110" colspan="2" type="grayedOut" read-only></hot-column>
                                <hot-column data="quote" type="'numeric'" width="70" format="group.format"></hot-column>
                                <hot-column data="isIncluded" title="'Use'" width="50" type="'checkbox'" width="50" checked-template="true" unchecked-template="false"></hot-column>
                            </hot-table>

                        </div>
                    </div>
                </div>
            </div>
        </div>


@Rex90
Copy link
Author

Rex90 commented Aug 3, 2016

So I'm doing a bit of digging and Looking at the "Event Listeners" in the chrome dev tool on the table elements and I can see that when I toggle between the tabs and the tables are re-drawn, the number of these scollr and visibltychange events double and trippes... is this expected?

image

@Rex90
Copy link
Author

Rex90 commented Aug 3, 2016

Here are the listeners after some toggles between states

image

@terite
Copy link

terite commented Aug 17, 2016

This may be very related to #157

@Rex90
Copy link
Author

Rex90 commented Nov 25, 2016

Is this on anyone's radar?

@AMBudnik
Copy link

AMBudnik commented Mar 6, 2018

Sorry that there was no reply for a longer time.
I am sure that you have already finished the project or abandoned it so I am closing the issue. However if not I'll reopen the issue.
ps. there is one option on our roadmap that can help to speed up the performance https://trello.com/c/m9KTygSV/80-rewrite-renderers-to-improve-performance-2152

@AMBudnik AMBudnik closed this as completed Mar 6, 2018
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

3 participants