这里的小提琴: 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小提琴产生右那里)过滤器列表。 目前有6组的30层的过滤器中的每个具有用于每个过滤器15个的选择元件。
在Firefox中,现在大约需要2秒重绘UI。
这是一次OK的角度JS? 有什么我做错了导致2秒。 渲染(原因2000元看起来并不大的号码给我,但2秒。肯定是很大的)?
在AngularJS 1.3+,有One-time binding
内置:
一次性绑定表达式的主要目的是提供一种方法来创建一个被注销,一旦结合稳定释放资源的结合。 减少被监视表达式的数量,使消化循环更快,允许在同一时间显示更多的信息。
为了使一次性结合,在前面加上::
到绑定值:
<div>{{::name}}</div>
另见相关讨论:
- 渲染值而不数据绑定
- 如何数据绑定在AngularJS工作?
- 真正从绑定停止元素-取消绑定一个元素- AngularJS
你应该看看bindonce如果你不需要更新UI中的数据已经被绑定到它后。 bindonce也可以等到一个对象被加载,然后做了结合。 它会为你节省大量的时间,减少您的$watch()
使用权当显着上课。
这是由于AngularJS如何做脏检查。 这里有一个明确的答案 ,以减缓与AngularJS渲染。
使用此项目: 角VS重复会提高你的表现。
这样,浏览器将呈现(由此角将尽自己的脏检查),只适合在您再现元素的滚动容器这么多的元素。 演示在这里
我意识到这是一个老问题,但我不认为答案已张贴呢。
我相信你的表格是速度慢的原因不只是你有2000个以上的元素,但这些元素是使用表单元素ng-model
。 内置在角表单验证是非常强大,方便,但能表现得非常缓慢尤其是当你第一次加载的形式。 如果这些180(6×)的输入元件使用类似ng-checked
代替ng-model
,避免形式验证机制,则形成应该快得多加载。
<input type="checkbox" ng-checked="filter.enabled">{{filter.Name}}
通过一次性绑定减少观察家::
还将帮助的情况,但我认为你的主要问题是与ng-model
和角表单验证。
随着约2000项加载,你不必一次渲染他们。 你可以积极地使它们在页面滚动,或更改页面。 请参考此问题
使用独特的ID,如过滤器ID,以尽量减少NG-repeat的创建所有的DOM的时间。 请参阅跟踪和复制
如alecxe以上的答案 ,可以使用一次性边界,如果不恰当的,你可以减缓消化频率与这种ng-model-options="{ debounce: 200 }
角选项设置
而在去年,你必须使用一些性能分析工具跟踪应用程序的瓶颈,并解决这些问题。
希望这可以帮助。
ng-repeat="filter in group.Filters | track by:filter.id | limitTo: NumPerOperation"
使用这两个角模块,你可以让你的表的renderization快得多。
“快给重复” https://github.com/allaud/quick-ng-repeat
“无限滚动” https://github.com/infinite-scroll/infinite-scroll
要知道这是不是提高你的“NG重复”的性能的解决方案,这只是一种不同的方法,使你的表快。
替补ng-repeat="group in Model.Groups"
与collection-repeat="group in Model.Groups"
。