mat-table 内的大量 mat-tooltip 会减慢应用程序答案

【问题标题】：Large number of mat-tooltip inside mat-table slows applicationmat-table 内的大量 mat-tooltip 会减慢应用程序
【发布时间】：2019-07-11 09:48:53
【问题描述】：

我们一直在使用mat-table 实现网格，每个单元格都有一个mat-tooltip。据我所知，即使用户将鼠标悬停在它上面，工具提示也会为每个单元格呈现。 tooltip的用法见示例代码。

<ng-container matColumnDef="carrier">
      <th mat-header-cell *matHeaderCellDef mat-sort-header class="clm-carrier">Carrier</th>
      <td mat-cell *matCellDef="let element" matTooltip="{{element.carrier}}" class="clm-carrier">{{element.carrier}}</td>
</ng-container>

我在某处发现工具提示如果有大量可能会影响您的性能。我们在 3 个不同的表中有大约 500 行，每个表至少有 5 列。所以几乎500 * 5 * 5 * 5 = 62500 max 可以随时渲染，这可能是生产中的开销。

这真的有问题吗？材质角度在渲染方面是否有所不同。即使使用 mat-tooltip 渲染大量工具提示是否可行？可以做些什么来改善这一点？

【问题讨论】：

标签： angular performance angular-material angular6

【解决方案1】：

您可以尝试使用简单的 html 标题属性来显示工具提示以显示大量工具提示。

使用 title="{{element.carrier}}" 反而 matTooltip="{{element.carrier}}"

【讨论】：

我怀疑，这会让它更慢。
我在某些情况下使用它。我在使用 matTooltip 时也遇到了缓慢，然后我将其更改为标题。现在它运行良好

【解决方案2】：

决定性地 62500 mat-tooltip 渲染可能会影响性能。也许考虑对您的表格实施分页？

【讨论】：

所以也许是popover 而不是mat-tooltip？它基于cdkOverlay，灵活且易于实施。

【解决方案3】：

如果您使用虚拟滚动，则只会呈现视口中的工具提示，这将减少对性能的影响。

检查一下。

https://material.angular.io/cdk/scrolling/overview

【讨论】：