显示桌子时的AngularJS性能令人难以置信的缓慢(1.6.5)

Question

我们正在构建一个应用程序，以显示具有时间表数据的表。在接口上，用户可以设置不同的过滤器。

我可以使用可以加快所有内容的数据网格。我可以在不进行分组的情况下使用桌子，并使用某种懒惰的提取，这会加快速度。但是，我们喜欢原样的布局。结果是手表超过2000年，我们正在经历瓶颈。这不是我们显示一百个行。

我们如何使其更具性能。我尝试了轨道，这并没有改善一件事情。我尝试了绑定，但这也没有用。（老实说，我不知道如何使其与键，价值对象一起使用）。一个性能技巧可能是更改过滤器，移动并将其链在控制器中？

您也可以看到，我们经常重复使用相同的过滤器，但是这对于小组来说是必要的。

。

我还没有看到任何与这种自定义表/组一起使用的懒惰机制。

希望您能帮助我指向正确的方向，因为我真的很喜欢当前的布局。

数据集在表中显示，并按日期分组。

示例输出：

hrefdatea |hrefdateb |hrefdatec |hrefdated

---

datea

带有列的rowa

与列的行

带列的行

---

dateb

带有列的rowd

带有列的Rowe

---

Datec

带有列的rowa

与列的行

带列的行

....

<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>

如果我包括下面的代码，手表可以从3k到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>

关于上述代码。只有在字段包含数据时，一列将显示一个包含数据集的额外字段的工具提示的图标。但这也会在使用过滤器时（因此重新绘制屏幕）时也会给出问题，因为其他行也显示了工具提示，即使特定行的字段不包含值时，问题？）

Answer 1

这是AngularJS处理更改检测和渲染的方式的限制。确实没有简单的解决方案 - 重点是轻松。我几次所做的是使用一种通常称为虚拟滚动/虚拟重复的技术。它基本上要做的是，它仅呈现在视口中可以看到的元素，但在列表/表的顶部和底部添加了偏移，以使滚动条保持恒定的大小，而不管实际呈现多少元素。然后，每当您滚动时，弹出视图的元素在变得可见之前就会无缝呈现。这使这是一个单一的长列表/表，当它实际上只能呈现可见的时。

有许多库可以实现此技术。我个人有一个名为Angular-VS重复的经验，但是您应该看看一些，并评估最适合您的用例。我也有一次也实现了自己的虚拟滚动，这肯定是可行的（在这种情况下，我需要虚拟滚动来垂直和水平工作）。