Windowing — это техника оптимизации производительности, которая отрисовывает только небольшую часть видимых строк в любой момент времени, вместо того чтобы отрисовывать весь список.
Эта техника особенно рекомендуется, когда твоё приложение должно отображать:
Две широко используемые библиотеки windowing предоставляют переиспользуемые компоненты для реализации:
react-window — лёгкая и эффективнаяreact-virtualized — богатая функциональностью, с большим количеством настроекОбе библиотеки предлагают встроенные компоненты для отображения списков, гридов и табличных данных.
Вместо отрисовки тысяч DOM-элементов техника windowing поддерживает видимое окно, которое отрисовывает только элементы, находящиеся в области видимости или рядом с ней. Когда пользователь прокручивает список, окно динамически обновляется: показывает новые элементы и удаляет скрытые из DOM.
Без windowing отрисовка 10 000 строк создаёт 10 000 DOM-узлов, потребляя значительный объём памяти и процессорного времени. С windowing ты отрисовываешь только 20–30 видимых строк одновременно, получая существенный прирост производительности без ущерба для плавности интерфейса.
Техника windowing только сокращает время перерисовки, но не влияет на общее количество DOM-узлов, созданных в приложении.
Новый — ещё не проверен сообществом
Вы