Модальное окно открывается примерно за 30 секунд.

В моем приложении есть модальное окно, которое иногда открывается примерно через 30 секунд. Профилировщик chrome devtools показывает, что реагирующие компоненты заканчивают рендеринг, затем появляется длинный промежуток, когда нет сообщения о том, что код javascript запущен, а затем модальное окно становится видимым на экране. Во время этого пустого промежутка профилировщик показывает только длинную анимацию, происходящую в разделе «Взаимодействия».

Что я могу сделать, чтобы модальное окно открывалось быстрее? Что делает браузер во время этой анимации?

Информация о приложении

  1. Использует реакцию + редукс
  2. Использует redux-saga для побочных эффектов
  3. Использует редукционную форму для управления формами
  4. Использует компоненты пользовательского интерфейса semantic-ui-react.
  5. Использует стилизованные компоненты для CSS

Информация о модальном окне

  1. Существует поле ввода автозаполнения, где вы можете искать элементы. При выборе элемента из результатов поиска отправляется действие, запускающее сагу.
  2. В саге делается вызов API для получения дополнительной информации об элементе.
  3. После завершения вызова API отправляется действие, которое устанавливает свойство initialValues редукционной формы, используемой внутри модального окна.
  4. Затем отправляется другое действие для открытия модального окна.

Другие наблюдения

  1. Удаление полей/компонентов из формы внутри модального окна ускоряет его открытие (~5-6 секунд по сравнению с ~30 секундами). Однако ни один конкретный компонент не является неисправным, поскольку удаление любого компонента имеет тот же эффект, что и удаление любого другого компонента.
  2. В Chrome открытие занимает до 30 секунд, а в Firefox — до 5-6 секунд.
  3. Отправка действия для открытия модального окна перед отправкой действия, которое устанавливает начальные значения избыточной формы, также делает его открытие намного быстрее.

reactjs redux-form performance semantic-ui-react redux-saga
person Prashant Baisla    schedule 18.08.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот несколько соображений по сокращению времени загрузки:

  1. Попробуйте реализовать ленивую загрузку из бэкенда, чтобы загружать наборы данных.
  2. Отслеживайте время, затраченное на вызовы API, на вкладке «Сеть», чтобы увидеть, какие запросы занимают больше всего времени. Также вы можете использовать console.time()/timeEnd() для отслеживания времени внутри кода.
  3. Разные браузеры используют разные движки (например, Chrome V8 для Chrome) и могут иметь разные приоритеты загрузки данных.
person Raman Haivaronski    schedule 20.08.2018