Задержка панели ввода после большого количества действий пользователя

Question

Я уже некоторое время пытаюсь отладить эту проблему, но, похоже, я не могу понять ее.

У меня есть интернет-магазин Angular.На странице обзора продукта мы в настоящее время загружаем компонент продукта, который состоит из загруженного, очень сжатого изображения.заголовок, ввод суммы, ввод размера и кнопка покупки.

Этот компонент отображается на странице 100 раз (каждая страница содержит 100 наименований товаров. В настоящее время мы рассматриваем снижение этого значения, но это не такпохоже, помогает с этой проблемой)

Всякий раз, когда пользователь добавляет, скажем, 10+ товаров в свою корзину (что случается чаще в нашем случае), поисковый ввод в боковой панели фильтра сильно задерживается / задерживается.

Это происходит только тогда, когда мы взаимодействуем с компонентом продукта.Мое первое предположение было бы, что это как-то связано с changeDetection.

Я понимаю, что это очень мало информации.Я пытался воспроизвести это в изолированной среде стекаблиц, но я не могу этого добиться.

Поэтому вместо фактического ответа, конечно, я надеялся, что кто-то может придумать грубую идею и указать мне наэто направление.

Большое спасибо

Answer 1

Начнем с этого:

1. Использовать стратегию OnPush по умолчанию
2. Разделить элемент ввода и компонент списка на разные компоненты.
3. Неиспользуйте в своих шаблонах тяжелые функции производительности.Сделайте это в файле ts.
4. Не используйте filtering трубы.
5. Вы можете использовать чистые каналы для увеличения производительности, поскольку они кэшируют результаты.
6. Используйте debounceTime и distinctUntilChanged на своем входе.
7. Используйте функцию TrackBy на своемngFor директивы.
8. Убедитесь, что вы использовали runOutsideAngular везде, где это разумно.
9. Убедитесь, что у вас нет ненужных манипуляций с DOM, которые вызывают DOM reflow.
10. Переместите столько CSS-анимаций в CSS, сколько возможно.
11. Всегда отписывайтесь от наблюдаемых при уничтожении компонента.

Продолжение следует ...