Большое реагирующее приложение с проблемами производительности стильных компонентов

Question

Я разработчик довольно большого реактивного приложения. Часть приложения представляет собой детализированную форму, которая загружается динамически и может содержать около 100 полей ввода разных типов данных (разных компонентов). Первоначальный рендеринг этой формы занимает около 500 мс на моем ноутбуке, и я хотел бы сделать это быстрее. Я не совсем уверен, что является причиной этого времени рендеринга, но я делюсь с вами тем, что у меня есть:

Это скриншот профилировщика реакции. Как вы можете видеть, есть некоторые коммиты, но один (оранжевый) выделяется. Это где фактическая форма отображается. Форма представляет собой иерархию составленных макетов, других контейнеров и контейнера полей с меткой и компонентом типа данных внутри. Один компонент не занимает слишком много времени для рендеринга, но в результате я получаю 500 мс.

, если мы поближе рассмотрим небольшую часть этого снимка экрана выше, мы увидим следующее:

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

const StyledDateAbstractWrapper = styled.div`
  && {

    align-items: center;
    cursor: ${props => props.immutable ? 'not-allowed' : 'default'};
    display: flex;

    input {
      display: ${props => props.immutable ? 'none' : 'block'}

      &:last-of-type {
        display: ${props => props.immutable ? 'block' : 'none'}
      }
    }
  }
`

, как вы видите, ничего особенного. Но для рендеринга требуется 2,3 мс. И внутри стилизованной кнопки, которая занимает 5 мс. Допустим, у меня есть пара таких и вот как я получаю 500 мс.

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

Так что мой вопрос ... есть ли что-то, что я могу дополнительно исследовать? Или есть четкие запреты на стилизованные компоненты, которые многократно визуализируются, например, селекторы элементов?

Я использую styled-components 5.0.1

Другой подход был бы используя что-то вроде https://github.com/bvaughn/react-window, но у меня нет списка на самом деле. более некоторые составные компоненты.

Обеспечение работающего приложения в данный момент немного сложнее.

спасибо за любые предложения

Answer 1

Прежде всего: удобство использования, 100 элементов формы - безумие! Ни один пользователь никогда бы не пробежал через все это (или даже четверть) этих элементов. Я предлагаю вернуться к вашему дизайнеру / специалистам по продукту и сказать им, чтобы они нашли лучший способ смоделировать бизнес-поток.

Действительно, забудьте о производительности. Никто из пользователей никогда не заполнит эту форму, и лучше понять и исправить ее сейчас, чем задним числом.

Что касается производительности: 100 элементов формы - это много! Браузер настольного компьютера может, конечно, справиться с этим HTML, но рендеринг всего этого в React имеет свои издержки на земле JS / DOM. Я бы сказал, что полсекунды - это неплохо, учитывая объем работы, которую должен выполнить браузер. И со стилевыми компонентами в миксе, вы также напрягаете CSSOM.

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

Answer 2

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

1 - Вместо компонентов с display: none вы можете просто удалите их из DOM с помощью { !immutable && <Component /> }, таким образом, компонент не займет место в VirtualDOM

2 - Вторая проблема может быть используемой вами библиотекой форм, вот обзор производительности некоторых из них , Сравнение производительности . Возможно, также поможет изменение используемой вами библиотеки.