AngularJS incredibly slow performance when showing a table (1.6.5)

Question

We are building an application to show a table with timetable data. On the interface the user can set different filters.

I could use a data-grid which would speed up about everything. I could use a table without grouping and use some sort of lazy fetching which would speed things up. However we like the layout as is. The consequence is that the watches are way over 2000 and we are experiencing bottlenecks. It is not that we show hundredths of rows.

How can we make this a bit more performant. I tried track by, which didn't improve a thing. I tried bind-once but that didn't work either. (Honestly I have no clue how to make it work with key,value objects). One performance trick might be changing the filters, move and chain them in the controller?

As you also can see, we re-use the same filters a lot, however this is necessary for the group by.

I also haven't seen any lazy-fetching mechanism which works with this kind of custom table / group by.

Hopefully you can help me to point me in the right direction, since I really kinda like the current layout.

The dataset is being displayed in a table and is grouped by date.

Example output:

hrefDateA | hrefDateB | hrefDateC | hrefDateD

---

DateA

RowA with columns

RowB with columns

RowC with columns

---

DateB

RowD with columns

RowE with columns

---

DateC

RowA with columns

RowB with columns

RowC with columns

....

<div ng-if="includeDesktopTemplate" ng-show="whateverdata.length > 0">
        <div>
            Jump to:
            <a ng-href="#tableheader{{$index}}" ng-repeat="(key, value) in whateverdata | filter:filterA() | filter:filterB() | filter:filterC() | groupBy: 'someproperty'" class="someclass">
                {{key}}
            </a>
        </div>
        <hr />
        <table>
            <thead>
                <tr>
                    <th class="timetablerow">HeaderA</th>
                    <th class="timetablerow">HeaderB</th>
                    <th class="timetablerow">HeaderC</th>
                    <th class="timetablerow">HeaderD</th>
                    <th class="timetablerow">HeaderE</th>
                    <th class="timetablerow">HeaderF</th>
                </tr>
            </thead>
            <tbody ng-repeat="(key, value) in whateverdata | filter:filterA() | filter:filterB() | filter:filterC() | groupBy: 'someproperty'">
                <tr>
                    <td colspan="6" class="desktoptablegroupby" id="tableheader{{$index}}">
                        {{key}}
                    </td>
                </tr>
                <tr>
                    <td colspan="6">
                        <hr class="redbackground" />
                    </td>
                </tr>
                <tr ng-repeat="row in value | filter:filterA() | filter:filterB() | filter:filterC()" ng-class-odd="'odd'" ng-class-even="'even'">
                    <td class="timetablerow">
                        {{row.propertyA}}
                    </td>
                    <td class="timetablerow">
                        {{row.propertyB}}
                    </td>
                    <td class="timetablerow">
                        {{row.propertyC}} - {{row.propertyD}}
                    </td>
                    <td class="timetablerow">
                        {{row.propertyD}}
                    </td>
                    <td class="timetablerow">
                        {{row.propertyE}}
                    </td>
                    <td class="timetablerow">
                        <div ng-show="{{row.propertyF}}">
                                <md-tooltip md-direction="{{tooltip.tipDirection}}">
                                    {{row.propertyF}}
                                </md-tooltip>
                                <md-icon md-svg-src="~/Content/comment.svg">
                                </md-icon>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <br /><br />
    </div>

If I include the code below, watches can go from 3k to 6k

<div ng-show="{{row.propertyF}}">
                            <md-tooltip md-direction="{{tooltip.tipDirection}}">
                                {{row.propertyF}}
                            </md-tooltip>
                            <md-icon md-svg-src="~/Content/comment.svg">
                            </md-icon>
                    </div>

Regarding the code above. One column would show an icon with a tooltip which contains the value of an extra field of the dataset, only when the field contains data. But this also gives issues when the filters are being used (so redraw of screen), since other rows are showing the tooltip then, even when the value of the field of the specific row does not contain a value.(DOM/update/filter issue?)

Answer 1

This is a limitation by the way AngularJS handles change detection and rendering. There's really no easy solution - with emphasis on easy. What I've done on several occasions is use a technique often refered to as virtual-scroll/virtual-repeat. What it basically does is that it only renders the elements that can be seen in the viewport, but adds offsets to the top and bottom of the list/table to keep the scrollbar a constant size, regardless of how many elements are actually rendered. Then whenever you scroll, the elements that pop into view is seamlessly rendered before they become visible. This gives the illusion that it's a single long list/table, when it really only renders what is visible.

There are many libraries that implement this technique. I've personally got experience with the one called angular-vs-repeat but you should take a look at a few and evaluation which fits best your use case. I've also on one occasion implemented my own virtual scroll and it was certainly doable (my usecase in that scenario was that I needed virtual scroll to work both vertically and horizontally).