Проблема Зависает React интерфейс

[xtrasupra]

Недавно сделал небольшой интерфейс для аренды т/с, вполне вышло неплохо учитывая что я сделал к нему дизайн, сверстал и подключил к серверу, меню вышло горизонтальное с небольшими функциями на фреймворке React (не особо разбираюсь в этой теме, не обессудьте), сделал а-ля горизонтальное скролл меню и дело в том что на локалке работает все отлично, но когда подключал к серверу произошло то что я не ожидал, скролл в игре очень зависает, не из-за того что мой пк слабый, а возможно не успевает рендерить анимацию и происходят лаги при скролле активных блоков, но все остальные анимации и тд работают плавно, с чем это может быть связано?
Если есть хороший Фронтер то отпишитесь в тг @behteev
За небольшую плату может поможете через демку, очень обидно ибо для моего уровня это действительно крутой интерфейс, не хотел бы закончить его так и не решив проблему.

 

[Jerry (ChatGPT)]

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

Если у вас возникли сложности с оптимизацией интерфейса на React, рекомендую обратиться за помощью к опытным фронтенд-разработчикам, которые смогут найти и исправить проблему. Возможно, на форуме или в специализированных сообществах вы найдете человека, который окажет вам помощь за вознаграждение. Удачи в решении проблемы с интерфейсом!

 

[Vermilion]

посмотреть хотя бы index.tsx

 

[xtrasupra]

Vermilion написал(а):

посмотреть хотя бы index.tsx

Нажмите для раскрытия...

У меня jsx разметка, а зачем сюда опен сурс заливать?
Да, может это важно, но я не хотел бы выкладывать сюда опен сурс, функций не так много и рендер должен адекватно обрабатываться, на локалке всё ок, не могу винить сервер и пк, только при активации меню скроллинг зависает, поэтому и хочу лс

 

[Vermilion]

xstrasupra написал(а):

У меня jsx разметка, а зачем сюда опен сурс заливать?
Да, может это важно, но я не хотел бы выкладывать сюда опен сурс, функций не так много и рендер должен адекватно обрабатываться, на локалке всё ок, не могу винить сервер и пк, только при активации меню скроллинг зависает, поэтому и хочу лс

Нажмите для раскрытия...

Тогда можешь распечатать код на листе формата А4 и приложить к монитору, я попробую посмотреть. Но не обещаю, что получится помочь.

 

[xtrasupra]

Vermilion написал(а):

Тогда можешь распечатать код на листе формата А4 и приложить к монитору, я попробую посмотреть. Но не обещаю, что получится помочь.

Нажмите для раскрытия...

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

 

[Inoi]

xstrasupra написал(а):

У меня jsx разметка, а зачем сюда опен сурс заливать?
Да, может это важно, но я не хотел бы выкладывать сюда опен сурс

Нажмите для раскрытия...

мне кажется ты чуть чуть переоцениваешь важность и уникальность такой невероятной разработки, как меню на реакте
ещё и без ксс

 

[xtrasupra]

Inoi написал(а):

мне кажется ты чуть чуть переоцениваешь важность и уникальность такой невероятной разработки, как меню на реакте
ещё и без ксс

Нажмите для раскрытия...

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

 

[xtrasupra]

Ладно, может я был не прав, но вот для общей картинки:
(http://imgur.com/a/QCwXQA9)

 

[Inoi]

ну ты хоть код компонента этого покажи, который типа карусель

 

[xtrasupra]

Inoi написал(а):

ну ты хоть код компонента этого покажи, который типа карусель

Нажмите для раскрытия...

Уже не за пк, пытался оптимизировать и переписывал код

Код:

const scrollToActiveTile = (instant = false) => {
    if (!containerRef.current) return;

    const container = containerRef.current;
    const tiles = container.children;

    if (tiles.length > activeIndex && tiles[activeIndex]) {
        const tile = tiles[activeIndex];
        const offsetLeft = tile.offsetLeft - container.offsetWidth / 2 + tile.offsetWidth / 2;
        container.scrollTo({
            left: offsetLeft,
            behavior: instant ? "auto" : "smooth",
        });
    }
};

 

[Inoi]

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

при этом



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



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

из того что тут есть и может прям в данном примере так влиять на работу цефки - есть только behavior smooth, в теории
поставь auto, например

в остальном в твоём конкретном примере ничего такого, кроме того, что от реакта здесь только название

 

[fivepkost]

JavaScript:

import React, { useRef } from 'react';

const ScrollableTileContainer = ({ activeIndex }) => {
    const containerRef = useRef(null);

    const scrollToActiveTile = (instant = false) => {
        if (!containerRef.current) return;

        const container = containerRef.current;
        const tiles = container.children;

        if (tiles.length > activeIndex && tiles[activeIndex]) {
            const tile = tiles[activeIndex];
            const offsetLeft = tile.offsetLeft - container.offsetWidth / 2 + tile.offsetWidth / 2;
            container.scrollTo({
                left: offsetLeft,
                behavior: instant ? "auto" : "smooth",
            });
        }
    };

 

[xtrasupra]

fivepkost написал(а):

JavaScript:

import React, { useRef } from 'react';

const ScrollableTileContainer = ({ activeIndex }) => {
    const containerRef = useRef(null);

    const scrollToActiveTile = (instant = false) => {
        if (!containerRef.current) return;

        const container = containerRef.current;
        const tiles = container.children;

        if (tiles.length > activeIndex && tiles[activeIndex]) {
            const tile = tiles[activeIndex];
            const offsetLeft = tile.offsetLeft - container.offsetWidth / 2 + tile.offsetWidth / 2;
            container.scrollTo({
                left: offsetLeft,
                behavior: instant ? "auto" : "smooth",
            });
        }
    };

Нажмите для раскрытия...

То есть тут теперь нету обновление компонента?
Просто интересно разобрать

 

[fivepkost]

xstrasupra написал(а):

То есть тут теперь нету обновление компонента?
Просто интересно и разобрать

Нажмите для раскрытия...

при перерисовке React вызывает функцию компонента заново, создавая новое представление, если activeIndex изменился, useEffect сработает и произойдет прокрутка к новой активной плитке, в данном случае компонент у нас ScrollableTileContainer

 

[Justin_Games]

В вёрстке где-то используется блюр?

 

[xtrasupra]

Justin_Games написал(а):

В вёрстке где-то используется блюр?

Нажмите для раскрытия...

Нет

 

[UchihaMadara]

Тебе нужно transition и transform translate, используя CSS

 

[kirillzver]

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

Спойлер

В любом случае, рекомендую перевести анимацию на CSS.

 

[xtrasupra]

kirillzver написал(а):

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

Спойлер

Посмотреть вложение 17936

В любом случае, рекомендую перевести анимацию на CSS.

Нажмите для раскрытия...

Эта часть SVG но эта часть обычная статичная картинка, другая зеленая палочка это тоже SVG, предлагаете передать картинки на CSS?