我对Angular 6性能问题有疑问。在页面中,有一个大表,其中有100行,每行有100列。然后,当我尝试使用ng-select或ng-bootstrap datepicker之类的库时,此页面有些迟钝。即使这些库与表之间没有数据交换。这意味着即使ng-select只是嵌入在HTML中并且没有填充任何数据,ng-select下拉列表的打开和关闭也很缓慢,加载大约需要0.5秒。与其他库相同。当我将表减少到10行时,滞后问题得到了显着改善。为什么会这样?
另一个观察结果是,当我使用HTML的本机标记(例如select选项)时,它一点也不迟钝,它会立即做出反应。如何改善我的情况下的性能?谢谢! 代码基本上就是这样。
应用程序组件:
<ng-select></ng-select>
<row-component *ngFor="let basket of baskets"></row-component>
行组件:
<div *ngFor="let apple of apples">
blah blah blah
</div>
答案 0 :(得分:2)
您是否对表使用任何库,例如Angular Material? 一种可能(也是非常常见的)解决方案是虚拟滚动: https://material.angular.io/cdk/scrolling/overview#virtual-scrolling
答案 1 :(得分:1)
您可能需要考虑几件事:
首先,您是否需要一次显示所有100列?您是否可以将列分解为更易于管理的块,并可以使用选项卡式界面(类似于Angular Bootstrap Tabset https://ng-bootstrap.github.io/#/components/tabset/examples之类的东西)并将相关列分组为选项卡,以减少必须显示的列数在一页上。
第二,当您超过一定数量的行时,将出现性能问题,这是对数据进行分页的最佳选择(同样,可以查看Bootstrap分页https://ng-bootstrap.github.io/#/components/pagination/examples)。您可以设置硬限制-可能每页40行,或者通过获取浏览器窗口大小,减去菜单等所需的空间量,然后将其余部分除以行高来动态确定行限制,以确定行数行将适合您的可用空间,并将其用作页面大小。这样,您始终只需要显示列的子集,并且无需滚动即可在屏幕上显示尽可能多的行,并且您会发现性能得到了显着提高。
答案 2 :(得分:1)
Ag-Grid上有一篇很棒的文章,介绍了它们如何优化表中条目的显示。 https://www.ag-grid.com/ag-grid-performance-hacks/