大表的Angular 6性能问题[重复]

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

您可能需要考虑以下几点：

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

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

Answer 2

1. 这也可能只是页面上正在创建和显示多少 DOM 元素的问题。您可以尝试使用仅呈现在屏幕上显示的行的行虚拟化。
2. 使用 ng-select 使网站比原生 html 标签更滞后这一事实让我认为来自 angular 组件的额外事件侦听器也降低了网页的性能。

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

Answer 3

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