В последнее время я столкнулся с интересной задачей при оптимизации одного из наших SPA-приложений. Мы обрабатываем довольно большие объемы данных, получаемых с бэкенда, и я заметил, что при рендеринге списков начинаются заметные "фризы".
Проблемы с Reactivity и Virtual DOM
Я использую стандартный подход для обновления состояния, но когда массив данных переваливает за 5000+ элементов, VDOM начинает заметно "тормозить" при каждом изменении.
Virtualization: Насколько оправдано использование библиотек типа react-window или vue-virtual-scroller для простых списков, или лучше оптимизировать сами компоненты?
Web Workers: Кто-нибудь пробовал выносить обработку и фильтрацию данных в Web Workers, чтобы не блокировать основной поток? Насколько сложной оказалась передача данных между потоками через postMessage?
Memoization: Насколько сильно useMemo или аналоги в других фреймворках помогают при фильтрации, если данные меняются очень часто?
Профилирование и узкие места
При профилировании в Chrome DevTools видно, что основное время уходит не на сам JavaScript, а на пересчет стилей и перерисовку (Layout/Paint). Есть ли у кого-то проверенный чеклист, с чего лучше начинать оптимизацию рендеринга больших списков?
Погода и продуктивность
Кстати, этот вопрос назрел именно сейчас, так как за окном типично "кодерская" погода. Глядя на прогноз, можно сказать, что ближайшие пару дней будут максимально дождливыми и пасмурными, с ощутимым понижением температуры.
Честно говоря, такая погода идеально подходит для глубокого погружения в код. Когда на улице льет как из ведра, пропадает всякое желание гулять, и это дает отличную возможность просто закрыться в комнате, включить музыку и спокойно разобраться с профилировщиком и оптимизацией алгоритмов. Это тот редкий случай, когда внешние погодные условия становятся союзниками в борьбе с ленивым кодом.
Что думаете?
Как вы обычно подходите к оптимизации производительности в подобных ситуациях? Возможно, есть какие-то паттерны или подходы, которые я упускаю из виду? Буду рад любым советам и опыту, особенно если сталкивались с похожими проблемами "замирания" UI при больших нагрузках.
https://thoitiethomnay.org/
