Модал занимает ~30 секунд, чтобы открыть

Question

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

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

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

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

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

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

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

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

Answer 1

Вот некоторые мысли по поводу сокращения времени загрузки:

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