Question

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

Answer 1

您是否对表使用任何库，例如Angular Material？一种可能（也是非常常见的）解决方案是虚拟滚动： https://material.angular.io/cdk/scrolling/overview#virtual-scrolling

Answer 2

您可能需要考虑几件事：

首先，您是否需要一次显示所有100列？您是否可以将列分解为更易于管理的块，并可以使用选项卡式界面（类似于Angular Bootstrap Tabset https://ng-bootstrap.github.io/#/components/tabset/examples之类的东西）并将相关列分组为选项卡，以减少必须显示的列数在一页上。

第二，当您超过一定数量的行时，将出现性能问题，这是对数据进行分页的最佳选择（同样，可以查看Bootstrap分页https://ng-bootstrap.github.io/#/components/pagination/examples）。您可以设置硬限制-可能每页40行，或者通过获取浏览器窗口大小，减去菜单等所需的空间量，然后将其余部分除以行高来动态确定行限制，以确定行数行将适合您的可用空间，并将其用作页面大小。这样，您始终只需要显示列的子集，并且无需滚动即可在屏幕上显示尽可能多的行，并且您会发现性能得到了显着提高。

Answer 3

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

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

大表的Angular 6性能问题

3 个答案: