Question

我正面临着ng-repeat和1000 + <tr>的一些性能问题。一些谷歌搜索告诉我，我必须推出自己的指令来克服$ digest周期。我不明白我该怎么办？有人可以解释一下这个，我怎样才能提高性能。我必须显示所有需要的1000多行，现在需要将近20秒来创建整个表。

非常感谢。

<tr ng-repeat="obj in objs" id="obj{{obj.id}}" ng-show="displayObj(obj)">
    <td>{{obj.objId}}</td>
    <td style="min-width: 70px;">
        <textarea rows="3" style="width: 100px" name="text" maxlength="100" ng-model="obj.text"></textarea>
    </td>
    <td><button class="btn btn-primary" ng-click="saveObj($event, obj)">Update</button></td>
</tr>

在控制器

中

$scope.saveObj = function ($event, obj) {
                console.log(deal);
                var UpdateObj = ObjService.updateObj();
                var updateObj = new UpdateObj();

                updateObj.text = obj.text;
                updateObj.$update({objId: obj.id});
            };

现在我意识到性能问题来自$ apply，我有大约3000个元素。如果我关闭ng-model，性能会更好。但我会失去双向数据绑定。无论如何我可以在这里调整表现吗？

Answer 1

如果有人现在绊倒这个问题，我通常会建议infinite-scroll。它使@toy提到的过滤操作非常简单。如果它们包含一个用于删除已滚动的屏幕外元素的选项，则它将成为杀手角度重复性能选项。

Answer 2

现在任何人都面临这个问题，应该使用像bind-once这样的东西。

一旦加载的大多数数据都不会改变，因此可以变为不可变，bindonce会从监视器中删除监视器以提高性能。

它非常易于使用，并且具有非常好的文档。

https://github.com/Pasvaz/bindonce

此外，您不应该一次加载1000行，您可以通过实现服务器端分页来按需加载数据来避免这种情况。

本文解释。 Server Side Pagination in AngularJS

表和3000+ tr的AngularJs性能问题？

2 个答案: