@ValeraNakhuy

Как уменьшить нагрузку на CPU в React?

Есть структура следующего вида

5c6fdf62408f1362213615.png

Когда nav сворачивается, то ширина content и всех items увеличивается.
Понятное дело нагрузка на CPU на пару секунд около 99%
И ясное дело все это сопровождается анимацией nav и соответсвенно растут items

Я пробовал transform: translateZ(0); и will-change: width
Но видимо я не туда их ставил, это не дало результата

Помогите и объясните как оптимизировать правильно нагрузку на CPU
  • Вопрос задан
  • 365 просмотров
Пригласить эксперта
Ответы на вопрос 4
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
К сожаление, Вам только вкладка Performance поможет. Посмотрите в ней, что конкретно больше времени занимает. Мне кажется, что это Layout и JS тут не причем.

JS конечно же является причиной, но проблема может быть на другой уровне.

Я бы посоветовал прочитать вот эту статью. И в ней есть огромное количество на полезную инфу в том числе и на курсы от udacity
Ответ написан
Комментировать
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
Сложно без кода отвечать, ибо есть несколько нюансов:
1. Меню физически существует после закрытия или удаляется?
2. Элементы ре-рендерятся при анимации схлопывания? Если да, то почему?
3. Как меняется ширина элементов? Вы из жс вывчисляете ширину и влоб устанавливаете каждому элементу или это на уровне ксс реализуется?
4. Какого типа у вас компоненты?
5. Используется ли shouldComponentUpdate?
Ответ написан
kshshe
@kshshe
Frontend developer
Я бы поискал, не слушает ли у вас в приложении что-то изменение ширины. Может быть, при изменении ширины все отдельные элементы контента перерисовываются, что и создает нагрузку.
Ответ написан
Комментировать
@rPman
Почти наверняка вы 99% времени меняете DOM объектов, которых даже не видно на экране, так выставьте их реальное перемещение на скроллинг, двигая только те элементы, что сейчас видимы на экране.

Если вам действительно нужна сложная анимация, где элементы двигаются независимо (а иначе их можно было бы разместить в едином div-е и двигать его максимально оптимально) то да, у вас проблема и придется менять используемые инструменты. Например чуть более эффективно работает SVG а еще более эффективно canvas и конечно же 3d-рендеринг с использованием видеоускорителей.

p.s. 99% проблем создает именно HTML DOM, на его изменения обычно тратится уйма времени.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы