27

这是小提琴：http: //jsfiddle.net/D5h7H/7/

它呈现以下内容：

<div ng-repeat="group in Model.Groups">
    <span>{{group.Name}}</span>
    <div ng-repeat="filter in group.Filters">
        <input type="checkbox" ng-model="filter.enabled">{{filter.Name}}
        <select ng-disabled="!filter.enabled">
            <option ng-repeat="value in filter.Values">{{value}}</option>
        </select>
    </div>
</div>

它是一个过滤器列表，从服务器加载到 json 中，然后呈现给用户（在示例中，json 是在 Fiddle 中生成的）。目前有 6 组，每组 30 个过滤器，每个过滤器有 15 个选项元素。

在 Firefox 中，现在重绘 UI 大约需要 2 秒。

这个时间适合 Angular js 吗？有什么我做错了导致2秒。渲染（因为 2000 个元素对我来说不是一个大数字，但 2 秒。肯定很大）？

4

8 回答 8

28

在 AngularJS 1.3+ 中，有One-time binding内置的：

一次性绑定表达式的主要目的是提供一种创建绑定的方法，一旦绑定稳定，该绑定就会取消注册并释放资源。减少被观察的表达式的数量使摘要循环更快，并允许同时显示更多信息。

为了进行一次性绑定，::在绑定值之前添加：

<div>{{::name}}</div>

另见相关讨论：

于 2014-09-08T23:04:58.747 回答
15

如果在绑定数据后不需要更新 UI，则 应该查看bindonce 。bindonce也可以等到一个对象被加载后再进行绑定。如果使用得当，它将为您节省大量时间并$watch()显着减少您的 es。

于 2013-09-16T17:44:12.860 回答
4

这是由于 AngularJS 是如何进行脏检查的。这是使用 AngularJS 进行慢速渲染的明确答案。

于 2013-03-03T16:36:03.693 回答
4

使用这个项目：angular-vs-repeat会提高你的表现。

有了这个，浏览器将渲染（因此 angular 将进行脏检查）只有这么多适合您渲染元素的可滚动容器中的元素。演示在这里

于 2014-05-27T11:36:06.430 回答
1

有大约 2000 个项目要加载，您不需要一次全部渲染它们。您可以在页面滚动或更改页面时积极呈现它们。参考这个问题

使用 filter id 等唯一 id 来最小化 ng-repeat 创建所有 dom 的时间。请参阅跟踪和复制

作为上述 alecxe 的答案，使用一次性边界，如果这不适合您，您可以使用此类ng-model-options="{ debounce: 200 }角度选项设置来减慢摘要频率

最后，您必须使用一些性能分析工具来跟踪应用程序的瓶颈，并修复它们。

希望这可以帮助。

ng-repeat="filter in group.Filters | track by:filter.id | limitTo: NumPerOperation"
于 2016-11-16T11:19:23.550 回答
1

我意识到这是一个老问题，但我认为尚未发布答案。

我相信你的表单很慢的原因不仅仅是你有 2,000 多个元素，而且这些元素是使用ng-model. Angular 中内置的表单验证功能非常强大和方便，但运行速度非常慢，尤其是在您第一次加载表单时。如果那些 180(6x30) 输入元素使用类似的东西ng-checked而不是ng-model，避免表单验证机制，那么你的表单应该加载得更快。

<input type="checkbox" ng-checked="filter.enabled">{{filter.Name}}

通过一次性绑定减少观察者::也将有助于这种情况，但我认为您的主要问题是ng-model角度表单验证。

于 2016-10-31T18:57:35.357 回答
0

使用这两个角度模块，您可以更快地渲染表格。

“快速-ng-重复” https://github.com/allaud/quick-ng-repeat

“无限滚动” https://github.com/infinite-scroll/infinite-scroll

请注意，这不是提高“ng-repeat”性能的解决方案，这只是一种使您的表格更快的不同方法。

于 2015-10-25T19:16:44.157 回答
-2

替换ng-repeat="group in Model.Groups"为collection-repeat="group in Model.Groups"。

于 2015-10-09T19:13:24.653 回答