javascript - AngularJs - ngRepeat 需要很长时间才能显示数据

Question

我的应用程序每页有 100 个项目。对于分页，我使用了一个自定义解决方案，该解决方案对接下来的 100 个项目进行新的 AJAX 调用。获取数据所需的时间约为 400 毫秒。但似乎显示需要时间来渲染。我读到原因可能是 ng-repeat。我无法使用 track by，因为我没有包含所有唯一项的列。我还阅读了一些可以使用 limit 的解决方案，但由于我已经使用了服务器端分页，所以我不需要限制。在这种情况下，我该如何改进渲染时间？

Answer 1

100 项对于 ng-repeat 应该不会成为问题，但这取决于您的页面的完整外观。

ng-repeat 创建了很多 watch ，使 angular 的脏检查(摘要过程)更长。

通常，您使用 ng-repeat 是为了显示数据而不是创建输入，因此您实际上并不需要双向绑定(bind)(一种方式就足够了)。

所以 bindonce是一个不错的库，可以帮助减少不需要的 watch 。

而不是做这样的事情:

<ul>
    <li ng-repeat="person in Persons">
        <a ng-href="#/people/{{person.id}}"><img ng-src="{{person.imageUrl}}"></a>
        <a ng-href="#/people/{{person.id}}"><span ng-bind="person.name"></span></a>
        <p ng-class="{'cycled':person.generated}" ng-bind-html-unsafe="person.description"></p>
    </li>
</ul>

你应该这样做:

<ul>
    <li bindonce ng-repeat="person in Persons">
        <a bo-href="'#/people/' + person.id"><img bo-src="person.imageUrl"></a>
        <a bo-href="'#/people/' + person.id" bo-text="person.name"></a>
        <p bo-class="{'cycled':person.generated}" bo-html="person.description"></p>
    </li>
</ul>