Что может быть причиной медленной реакции? - PullRequest
Новая
       17

Что может быть причиной медленной реакции?

0 голосов
/ 05 января 2019

Я поддерживаю CMS на основе React, и я застрял в проблеме производительности, когда добавление 10 новых полей ввода добавляет 1 секунду ко времени обработки браузером. Это не мой код, и у меня нет опыта в React. У меня есть опыт работы с профилированием, и я не совсем понимаю, как работает механизм рендеринга.

Я подключил функцию ReactCompositeComponent._updateRenderedComponent , чтобы увидеть, где находится основное узкое место производительности, и, похоже, разница в том, что я получаю много хитов. Добавление 40 элементов повторителя с календарными входами вызывает эту разницу в производительности (форма должна поддерживать более 200 входов, что в настоящее время занимает 20 секунд):

  • div : 250 мс -> 1600 мс, 1300 хитов -> 8100 хитов
  • ConnectedField (реквизит) : 20 мс -> 370 мс, 70 хитов -> 2300 хитов
  • Календарь () : 10 мс -> 300 мс, 20 хитов -> 1200 хитов (но я только добавил 40 входов календаря)
  • ConnectedFieldArray () : 30 мс -> 250 мс, 200 хитов -> 1300 хитов

Что может быть причиной такого количества попаданий только для нескольких добавленных элементов?

Это график профилирования Chrome DevTool (нажмите для увеличения):

image

1 Ответ

0 голосов
/ 14 марта 2019

Там может быть много причин, которые влияют на производительность реакции

  1. Роль ключей при рендеринге длинных списков. Ключи имеют решающее значение для сравнения фактического dom с виртуальным dom.

  2. Отключение объекта. Если вы изменяете объект, ThenInComponentUpdate не может выполнить проверку и запускает жизненный цикл обновления без необходимости.

  3. API-вызовы только в ComponentDidMount, любой другой жизненный цикл в монтируемой части будет без необходимости вызывать метод render.

  4. Используйте Debounce / Throttle для ввода параметров, чтобы избежать ненужных вызовов функций / API

  5. Используйте виртуализированную библиотеку React при рендеринге длинных списков, поскольку это сократит количество элементов dom.

  6. Рассчитать производительность с помощью плагина реагировать-дополнений-перф.

  7. Раннее связывание функций, избегайте связывания в функции рендеринга

...