Я строю таблицу с возможно более чем 1000 ячеками, используя угловые 8 и ngrx.
Есть два компонента, один содержит всю таблицу, со всеми *ngFor
, необходимыми для ее построения, идругой для отдельной ячейки таблицы.
Все ячейки являются одним и тем же компонентом, они получают на входе некоторые данные для идентификации себя, а затем создают две наблюдаемые для магазина: одну для изменений макета (показать / скрыть)/ переключить флажок) и другой для событий «зависания».
Ячейки отправляют два события: изменение состояния (ячейка была нажата) и события мыши.
В настоящее время событие click
достаточно гладкое, но я все еще получаю некоторые предупреждения от Chrome, например
zone.js:1704 [Violation] 'click' handler took 181ms
zone.js:3068 [Violation] 'setTimeout' handler took 152ms
onmouseenter
не поддается управлению, вызывает слишком много событий и приводит к зависанию системы (никогда не вызывает onmouseleave
), также установка семафора для отправки только одного события не работает, значение этогоникогда не меняется.
Я уже использую ChangeDetectionStrategy.OnPush,
в компоненте ячейки, async
в шаблоне с distinctUntilChanged
в наблюдаемых для уменьшения количества событий.
Я спрашиваю, как правильно использовать события мыши и как настроить производительность, потому что таблица должна работать с более чем 1000 ячеками.
Спасибо