内嵌的angularjs ng模型性能较差。

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (46)

在以下场景中,有一个性能问题:

<div ng-repeat="a in array">
  <input ng-model="something">
</div>

我在控制器上写了代码ng-click将数组更改为具有不同的对象集。问题是,如果数组有相当数量的对象,单击就没有我想要的那么快(延迟很短)。

经过调查,我注意到$digest更改ng-click

真正的应用场景是这样的:我有一个表,其中的每一行代表一个可编辑的对象,每个对象都有许多我想要编辑的不同字段。这样,每当我单击表中的一行时,就会有另一个html包含所有这些ng-repeat有不同的inputIt‘关于我的对象的属性。

有没有人知道如何提高效率?

提问于
用户回答回答于

通常来说,在同一页上有太多的输入元素是个坏主意。这就是为什么专业的数据网格编辑器一次只编辑一个数据行的原因,无论是在单独的弹出窗口中还是在直线上。即使在在线使用时,物体也会被动态注入.

一个输入元素太重了,不能在同一个页面上有太多的输入元素。我过去也犯过同样的错误,试图实现一个数据网格,其中所有可编辑的字段从一开始都是输入元素。最重要的是,必须保持一个实时的角度模型绑定,这会增加性能开销。

在的情况下,最简单的方法之一是实现一个指令,该指令显示为SPAN元素,直到单击它并在Click事件上交换输入元素为止。另一种选择--两者兼而有之,并切换其可见性风格。从角度方向上看,后者可能更容易,但可能没有那么有效。

另外,还要注意你的其他绑定。当涉及到数据网格时,这一点变得非常重要。在角1.3中,现在可以使用“::”语法进行一次绑定,这也可能有所帮助。

用户回答回答于

所以你不能用现在的ng-repeat方法来屏蔽用户界面的数百/数千/记录等。唯一的解决方案是使用异步解决方案,并一次呈现一些集合。不幸的是,我没有看到一个异步的重复。

幸运的是,你可以使用ng-repeat的limitTo属性作为类似的东西。如果你有limitTo:num其中num = 5,那么只会显示前5条记录。如果你设置了num = 7,那么它保留了5条已经渲染的记录,并且只渲染了第6条记录和第7条记录。

所以为了渲染几千条记录,你需要像这样改变limitTo异步:

<div ng-repeat="a in array | limitTo:tick">

...

var repeatAsyncHack = function() {
    $scope.$digest();
    sum += +new Date() - t;
    if($scope.tick < numOfObjects) {
        $scope.tick+=tickAmount;
        requestAnimationFrame(repeatAsyncHack);
    } else {
        $('#results').prepend(
            $("<div>" + 
              numOfObjects + ' objects test took: ' + sum +
              "ms</div>"));
    }
}

当然,总的渲染时间要长得多,这是有利的。这样做只是为了让应用程序更具响应性。

扫码关注云+社区

领取腾讯云代金券