大表的Angular 6性能问题

时间:2019-01-14 19:18:49

标签: javascript angular performance typescript dom

我对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>

3 个答案:

答案 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)

  1. 这也可能是一个问题,即正在创建并在页面上显示多少个DOM元素。您可以尝试使用行虚拟化,它仅渲染屏幕上显示的行。
  2. 使用ng-select会使网站比原生html标签更滞后的事实使我认为,来自角度组件的其他事件侦听器也降低了网页的性能。

Ag-Grid上有一篇很棒的文章,介绍了它们如何优化表中条目的显示。 https://www.ag-grid.com/ag-grid-performance-hacks/