避免在不可变数据更改时重新创建组件

时间:2017-11-21 11:03:56

标签: angular rxjs

我做了一个用来说明问题的数字(这些数字非常高,可以正确地说明问题,因为它发生在每个行内有更多数据的小数据集中。)

https://plnkr.co/edit/YVaFZ7mACeQErLJuIFpZ?p=preview

里面有这个简单的功能:

populateArray(){
    const newArray = [];
    const start = Date.now();
    for(const i = 0; i < 100000; i++){
      newArray.push({name: 'item ' + i, data: 'data'+i});
    }
    this.array = newArray;
    this.timer = Date.now() - start;
  }

当你点击按钮时,生成数组需要大约35ms,并且页面会冻结更长的时间,这是逻辑,因为你正在创建大量的dom组件。

现在的问题是当你再次点击它时,页面会再次冻结,因为它会重新创建所有组件,因为数组是不可变的,所提供的是一个全新的。

由于Observable发出的数据不可变,因此无法避免不可变状态。

话虽如此,如何改善这类问题的表现?因为在我的生产案例中,数据更改不是很大,您可以假设返回的数据的90%是相同的,因此大多数情况下不需要再次创建组件。

1 个答案:

答案 0 :(得分:0)

通常,您不应该显示/创建这么多元素。您的用户应该如何一次查看/使用所有100k元素?想想更好的用户界面,添加过滤器或其他东西。

解决此问题的另一种技术是所谓的“虚拟滚动”或“窗口化”。想法是您只显示/计算当前可见的内容。以下是一些基于此的库: