Как использовать Angular ChangeDetectionStrategy, чтобы сделать таблицу с несколькими входами быстрее? - PullRequest
Новая
       19

Как использовать Angular ChangeDetectionStrategy, чтобы сделать таблицу с несколькими входами быстрее?

0 голосов
/ 05 марта 2020

У меня есть приложение Angular с таблицей, которая содержит более 200 строк с 10 входами в каждой. Если я go на последней странице и добавляю некоторый текст для ввода, он работает нормально, но если go на последней странице, нажимая вкладку и редактируя значения, он начинает работать медленно.

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

Я попытался добавить changeDetection: ChangeDetectionStrategy.OnPush в свой компонент, и он стал быстрее , но я должен нажать на экран, чтобы визуализировать таблицу в первый раз. Кроме того, я заметил, что поиск в полях таблицы стал намного медленнее.

Есть ли способ заставить приложение переопределить sh обнаружение изменений только для отображаемых в данный момент входных данных?

Я использовал chrome Devtools как sugested, и вы можете видеть, что отклик увеличивается со временем при нажатии клавиш, когда я редактирую значения входов таблицы. Recorded performance with chrome DevTools

enter image description here

1 Ответ

2 голосов
/ 05 марта 2020

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

Производительность инструмента разработчика

  1. Использование Chrome Dev Tools (или любой другой аналогичный инструмент) для записи и измерения производительности на странице. Пример вывода:

enter image description here

Определите причину проблемы. Это медленное JavaScript выполнение? Это проблема с сетью.

Устраните ее соответствующим образом.

JavaScript Проблема может быть вызвана рядом причины. Может быть, вы выполняете некоторый код в al oop, и это вызывает дополнительные вычисления.

Какую таблицу вы используете. Таблица материалов , см. Инструменты для повышения производительности (например, нумерация страниц). Если вы имеете дело с тысячами записей, рассмотрите возможность использования таблиц данных (например, Ag Grid ).

Пример

Просмотрите этот учебник YouTube для Наглядная демонстрация того, как улучшить время загрузки.

...