AngularJS在约2000元的渲染很慢?(AngularJS really slow at re

2019-07-20 21:33发布

这里的小提琴: 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秒。肯定是很大的)?

Answer 1:

在AngularJS 1.3+,有One-time binding内置:

一次性绑定表达式的主要目的是提供一种方法来创建一个被注销,一旦结合稳定释放资源的结合。 减少被监视表达式的数量,使消化循环更快,允许在同一时间显示更多的信息。

为了使一次性结合,在前面加上::到绑定值:

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

另见相关讨论:

  • 渲染值而不数据绑定
  • 如何数据绑定在AngularJS工作?
  • 真正从绑定停止元素-取消绑定一个元素- AngularJS


Answer 2:

你应该看看bindonce如果你不需要更新UI中的数据已经被绑定到它后。 bindonce也可以等到一个对象被加载,然后做了结合。 它会为你节省大量的时间,减少您的$watch()使用权当显着上课。



Answer 3:

这是由于AngularJS如何做脏检查。 这里有一个明确的答案 ,以减缓与AngularJS渲染。



Answer 4:

使用此项目: 角VS重复会提高你的表现。

这样,浏览器将呈现(由此角将尽自己的脏检查),只适合在您再现元素的滚动容器这么多的元素。 演示在这里



Answer 5:

我意识到这是一个老问题,但我不认为答案已张贴呢。

我相信你的表格是速度慢的原因不只是你有2000个以上的元素,但这些元素是使用表单元素ng-model 。 内置在角表单验证是非常强大,方便,但能表现得非常缓慢尤其是当你第一次加载的形式。 如果这些180(6×)的输入元件使用类似ng-checked代替ng-model ,避免形式验证机制,则形成应该快得多加载。

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

通过一次性绑定减少观察家::还将帮助的情况,但我认为你的主要问题是与ng-model和角表单验证。



Answer 6:

随着约2000项加载,你不必一次渲染他们。 你可以积极地使它们在页面滚动,或更改页面。 请参考此问题

使用独特的ID,如过滤器ID,以尽量减少NG-repeat的创建所有的DOM的时间。 请参阅跟踪和复制

如alecxe以上的答案 ,可以使用一次性边界,如果不恰当的,你可以减缓消化频率与这种ng-model-options="{ debounce: 200 }角选项设置

而在去年,你必须使用一些性能分析工具跟踪应用程序的瓶颈,并解决这些问题。

希望这可以帮助。

ng-repeat="filter in group.Filters | track by:filter.id | limitTo: NumPerOperation"


Answer 7:

使用这两个角模块,你可以让你的表的renderization快得多。

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

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

要知道这是不是提高你的“NG重复”的性能的解决方案,这只是一种不同的方法,使你的表快。



Answer 8:

替补ng-repeat="group in Model.Groups"collection-repeat="group in Model.Groups"



文章来源: AngularJS really slow at rendering with about 2000 elements?