时间戳

首页 > 解决方案 > 大表的Angular 6性能问题

javascript - 大表的Angular 6性能问题

问题描述

我对 Angular 6 性能问题有疑问。在页面中有一个大表，它有 100 行，每行有 100 列。然后，当我尝试使用 ng-select 或 ng-bootstrap datepicker 等库时，此页面有点滞后。即使这些库与 table 没有数据交换。这意味着即使 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>

标签： javascriptangularperformancetypescriptdom

解决方案

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

推荐阅读