大表角6性能问题

Question

我有一个问题，角6性能问题。页面中有一个大表，它有100行，每一行有100列。然后，当我尝试使用诸如ng-select或ng-引导数据报警器等库时，即使这些库没有与表进行数据交换，这个页面也是一种滞后。这意味着即使ng-select只是嵌入在HTML中并且没有数据填充，ng选择下拉的打开和关闭都是滞后的，加载大约需要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

1. 它也可能只是一个问题，有多少DOM元素正在创建和显示在页面上。您可以尝试使用行虚拟化，它只呈现屏幕上显示的行。
2. 使用ng-select使网站比本地html标记更滞后，这使我认为来自角组件的附加事件侦听器也降低了网页的性能。

Ag-Grid有一篇关于如何优化表中显示条目的优秀文章。https://www.ag-grid.com/ag-grid-performance-hacks/

Answer 2

这张桌子有像棱角材料一样的库吗？一个可能的(也是非常常见的)解决方案是虚拟滚动：https://material.angular.io/cdk/scrolling/overview#virtual-scrolling。

Answer 3

有几件事你可能需要考虑：

首先，是否需要同时显示所有100列？您是否可以将列分解成更易于管理的块，或者使用选项卡式接口(类似于角引导Tabset https://ng-bootstrap.github.io/#/components/tabset/examples)和将相关列分组到选项卡中，以减少必须在一页上显示的列的数量。

第二，当您越过一定数量的行时，会出现性能问题，这是分页数据的一个很好的选择(同样，请看一下引导分页https://ng-bootstrap.github.io/#/components/pagination/examples)。您可以设置一个硬限制--每页可能有40行，或者通过获取浏览器窗口大小、减去菜单所需的空间大小等来动态设置行限制，并将其余部分除以行高来确定可用空间中的行数，并将其用作页面大小。通过这种方式，您总是只需要显示列的一个子集，并且只需要在屏幕上显示适合的行，而不需要滚动，您应该会发现性能有了显著的提高。