我做了一个用来说明问题的数字(这些数字非常高,可以正确地说明问题,因为它发生在每个行内有更多数据的小数据集中。)
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%是相同的,因此大多数情况下不需要再次创建组件。
答案 0 :(得分:0)
通常,您不应该显示/创建这么多元素。您的用户应该如何一次查看/使用所有100k元素?想想更好的用户界面,添加过滤器或其他东西。
解决此问题的另一种技术是所谓的“虚拟滚动”或“窗口化”。想法是您只显示/计算当前可见的内容。以下是一些基于此的库: