Стоит ли удалять из DOM ушедшие за кадр элементы карусели в React.JS?
Всем привет, на главной странице сайта (джуновский пет-проект) есть две однотипные карусели, под которые я делаю компонент. В одной карусели отображаются популярные товары, а во второй товары на распродаже; на другой странице сайта будет эта же карусель с недавно просмотренными товарами, тоесть по идее в списке карусели может быть много товаров. Изначально карусель находится в самом левом положении и на экране отображается 4 товара, я же рендерю 5 первых товаров из списка, чтобы один находился справа за кадром. За перерендер отвечает useState position, хранящий позицию карусели, с изначальным значением 0. Дальше по кликам на стрелки вправо position инкрементируется, изображение меняет свойство left, левый товар уходит налево за кадр, а справа за кадром рендерится один следующий товар.
К сути вопроса:
Изначально у меня код получился так, что товары уходящие налево за кадр, там и отстаются все в ряд в количестве равному количесву ушедших, а товар за кадром справа всегда один (если двигаться налево, то лишние за кадром справа удаляются из DOM). Фото 1 прилагается (красным обведена видимая часть карусели)
.
Потом мне в голову пришла гениальная(или наоборот) идея, чтобы уже прогруженые товары за кадром справа тоже не удалять, я это сделал засчет заведения еще одного локального состояния loadedPosition, который инкрементируется всесте с position, но в отличии от position не декрементируется при обратном ходе налево. Теперь двигаясь направо в первый раз справа рендерится одна лишняя картинка, но если начать двигаться налево то уже прогруженные картинки все хранятся справа за кадром.
Логика у меня была такая: а вот представим, что юзер с плохим интернетом на старом лагающем компе двигает мою карусель направо, двигает, двигает, еле прогружая каждый новый товар справа, а потом захотелось ему вернуться на пару товаров назад налево, и я вместо того, чтобы сохранить с таким болем прогруженные ним товары, взял и удалил их из DOM. Теперь, захотев двинуть на право дальше, этот юзер с ужасом обнаружит, что ранее прогруженное нужно грузить опять.
Если я мыслю неправильно, укажите, пожалуйста, как правильно.Может стоит вообще удалять все лишние картинки, что справа, что слева и оставлять максимум 6 зарендеренных одномоментно(4 в кадре и по одной за кадром слева и справа), а юзеру с лагающим компом и плохим интернетом только хуже оттого, что я ему храню за кадром кучу не нужных товаров.
Может еще какие советы будут для данной ситуации. Например,я вот думал может при загрузке главной страницы достать из сервера только, например, 6 первых товаров для карусели (что наверное менее затратно, чем сразу все), а загрузку всех пустить паралельно и сделать перерендер, когда они прийдут. Или быть может даже послать запрос на сервер на получение всех товаров только, когда я зафиксирую, что юзер начал взаимодействовать c каруселью. Быть может сюда можно куда-то прикрутить ленивую загрузку lazy и Suspense для незагруженных товаров за кадром. Я пытался, но пришел к выводу, что лениво он загружает только сам файл компонента ProductCard, а он ведь мне нужен для изначальных пяти товаров. И что ленивую загрузку нельзя прикрутить для конкретных версий компонентов. Может я неправ. В общем сори за лонгрид, это мой первый вопрос тут, и спасибо за ответы/советы.
Ответы (1 шт):
Впервые такое делаю, просто всё это писать было не охота и я согласен с нижесказанным
Ответ ChatGPT (ru) (Был отправлен весь вопрос без изменений):
Вопрос о том, стоит ли удалять из DOM элементы, которые ушли за кадр в карусели, зависит от различных факторов, таких как производительность, использование ресурсов и потребности конкретного проекта. Рассмотрим несколько аспектов:
Производительность и ресурсы:
- Если карусель содержит большое количество элементов, и удаление тех, что ушли за кадр, помогает уменьшить нагрузку на DOM и улучшить производительность, то это может быть разумным решением.
- Однако, если количество элементов невелико и удаление/добавление элементов не вызывает существенных проблем производительности, то можно оставить все элементы в DOM.
Ленивая загрузка:
- Использование ленивой загрузки (lazy loading) и Suspense может быть хорошим вариантом для оптимизации производительности. Вы можете использовать эти подходы для загрузки данных и компонентов только тогда, когда они действительно нужны.
Кеширование данных:
- Если у вас есть возможность кешировать данные (например, в Redux или другом хранилище), вы можете сохранять данные о товарах и не удалять их из DOM при смене позиции карусели.
Пользовательский опыт:
- Удаление элементов может привести к более быстрой загрузке и отзывчивости карусели, но также может вызвать перезагрузку данных при возврате пользователя на предыдущие позиции. Необходимо взвесить преимущества и недостатки с точки зрения пользовательского опыта.
Оптимизации на стороне сервера:
- Как вы предложили, можно рассмотреть возможность запроса только необходимого количества товаров с сервера при загрузке страницы и дозагрузки остальных асинхронно.
Решение зависит от конкретных требований вашего проекта и компромиссов, которые вы готовы сделать между производительностью и потребляемыми ресурсами. Экспериментируйте с различными подходами и измеряйте их влияние на производительность вашего приложения.
Ответ ChatGPT (en) (Был отправлен только заголовок вопроса на английском):
Решение об удалении элементов карусели за пределами кадра из DOM в приложении React.js зависит от различных факторов, и универсального ответа не существует. Вот несколько соображений, которые помогут вам принять обоснованное решение:
Плюсы удаления элементов, выходящих за рамки:
Производительность. Удаление элементов, которые в данный момент не видны, может повысить общую производительность вашего приложения. Меньшее количество узлов DOM означает меньшее использование памяти и потенциально более быстрый рендеринг.
Доступность. Меньший размер DOM может способствовать лучшей доступности, поскольку в нем меньше элементов для навигации для программ чтения с экрана и других вспомогательных технологий.
Более плавное взаимодействие с пользователем. Если ваша карусель содержит большое количество элементов, удаление их из поля зрения может обеспечить более плавное взаимодействие с пользователем, особенно на устройствах с ограниченными ресурсами.
Минусы удаления элементов, выходящих за рамки:
Сложность. Реализация логики динамического добавления и удаления элементов в зависимости от их видимости может усложнить ваш код. Это может привести к усложнению поддержки кода и возможным ошибкам.
Производительность прокрутки. Если у вас большое количество элементов и ожидается, что карусель будет часто прокручиваться, затраты на динамическое добавление и удаление элементов могут перевесить преимущества.
Эффекты перехода. Если в вашей карусели используются плавные переходы между элементами, динамическое удаление и добавление элементов может помешать этим переходам.
Соображения:
Количество элементов. Если в вашей карусели небольшое количество элементов, прирост производительности от удаления элементов, выходящих за рамки кадра, может быть незначительным. Однако для каруселей с большим количеством элементов выигрыш в производительности может быть более заметным.
Ресурсы устройств. Учитывайте устройства, на которых будет работать ваше приложение. На мощных устройствах влияние наличия внеэкранных элементов в DOM может быть минимальным. На менее мощных устройствах оптимизация DOM может оказаться более важной.
Функции библиотеки/фреймворка. Если вы используете библиотеку или фреймворк карусели, проверьте, обеспечивает ли она уже оптимизацию для обработки элементов, находящихся вне поля зрения.
Тестирование. Прежде чем приступать к какой-либо оптимизации, тщательно протестируйте производительность на различных устройствах и в браузерах, чтобы убедиться, что предложенные изменения окажут положительный эффект.
Таким образом, стоит ли удалять элементы карусели за пределами кадра из DOM в React.js, зависит от конкретных требований и ограничений вашего приложения. Перед реализацией таких оптимизаций рекомендуется измерить влияние на производительность и рассмотреть компромиссные варианты.