Chrome浏览器中的多行角度网格性能 [英] Angular many rows grid performance in Chrome browser

问题描述

我需要使组件女巫包含一个包含很多行的表. 所有都适用于小数据.但是，如果项目数增长到2000年甚至更多，它将变得滞后.滚动，尤其是动画变得太慢.

I need to make a component witch contains a table with plenty of rows. All works great on small data. But if items count grows to 2000 and more it becomes lagging. Scrolling and, especially, animation becomes too slow.

我还尝试为 ngFor 设置 trackBy 功能，但是在这种情况下，它对性能没有影响.

I've also tried to set trackBy function for ngFor but it has no influence to performance in this case.

请参阅 stackblitz 示例；

Please, see stackblitz example;

如您所见，当您使用100件物品时，所有物品都可以完美地工作，在2000年它会冻结，而在10,000张时则无法使用.

As you can see all works perfectly when you use 100 items, on 2000 it stars freezing and on 10,000 it is not usable.

我想知道在Angular中显示带有大量数据的网格的正确方法是什么，以及如何提高此类页面的性能?

I'm wondering what is the correct way to show grids with lot of data in Angular and how I can increase performance of such kind of pages?

是否有一些延迟加载实现的示例，我可以通过某种方式做到这一点，即在DOM中只有可见行以html的形式出现，并且从DOM中删除了除滚动以外的所有行?

Is there some example of lazy loading implementation can I do it in a way that only visible rows are present as html in DOM and all rows besides scroll are removed from DOM?

任何想法将不胜感激.

Any ideas will be appreciated.

更新

我拥有最新版本的Chrome浏览器:版本66.0.3359.181(官方内部版本)(64位).

I have the latest version of Chrome browser: Version 66.0.3359.181 (Official Build) (64-bit).

我已经在不同的PC和浏览器上进行了尝试:它仅在chrome中冻结(例如，在Macbook上为chrome，它在PC上比在PC上工作要好得多，但比在safari中更差).

I've tried it of different PCs, browsers: it is freezes only in chrome (in chrome on a mac book it works much better then on PC but worse than in safari, as example).

推荐答案

正确的方法是当应用程序动态破坏不可见的元素时，应用虚拟滚动方法.我知道Angular的两种解决方案:

The correct way is to apply virtual scroll approach when the App dynamically destroys elements as they become invisible. I know two solutions for Angular:

• angular2-virtual-scroll (目前最受欢迎)有一些有趣的分支
• ngx-ui-scroll ，由我维护，可以随时询问有任何疑问

• angular2-virtual-scroll, most popular for now, has some interesting forks
• ngx-ui-scroll, is maintained by me, feel free to ask any questions

这篇关于Chrome浏览器中的多行角度网格性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！