Большое количество подсказок внутри циновки замедляет процесс нанесения

Question

Мы внедрили грид, используя mat-table, и для каждой ячейки есть mat-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>

Где-то я обнаружил, что подсказка может повлиять на вашу производительность, если их много.У нас есть около 500 строк в 3 разных таблицах и минимум 5 столбцов в каждой.так что почти 500 * 5 * 5 * 5 = 62500 max может быть обработан в любое время, что может привести к накладным расходам при производстве.

Неужели это действительно проблема?Отличается ли материал угловых работ с точки зрения рендеринга.Возможно ли сделать рендеринг большого количества всплывающих подсказок, даже если с помощью mat-tooltip?Что можно сделать, чтобы улучшить это?

Answer 1

Вы можете попробовать простой атрибут заголовка html, чтобы показать всплывающую подсказку для большого количества всплывающих подсказок.

Использование title="{{element.carrier}}" вместо matTooltip="{{element.carrier}}"

Answer 2

Если вы используете виртуальную прокрутку, будут отображаться только всплывающие подсказки в порту просмотра, что уменьшит влияние на производительность.

проверьте это.

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

Answer 3

Рендеринг 62500 mat-tooltip может повлиять на производительность.Может быть, рассмотреть вопрос о реализации нумерации страниц на вашем столе?