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

Question

[ValeraNakhuy]

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



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

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

Помогите и объясните как оптимизировать правильно нагрузку на CPU

Comments

[Дархан]

А что за CPU то у вас?

[ValeraNakhuy]

Дархан Камалиев макбух

Answer 1

[Николай Шабалин]

К сожаление, Вам только вкладка Performance поможет. Посмотрите в ней, что конкретно больше времени занимает. Мне кажется, что это Layout и JS тут не причем.

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

Я бы посоветовал прочитать вот эту статью. И в ней есть огромное количество на полезную инфу в том числе и на курсы от udacity

Answer 2

[Виталий Киренков]

Сложно без кода отвечать, ибо есть несколько нюансов:
1. Меню физически существует после закрытия или удаляется?
2. Элементы ре-рендерятся при анимации схлопывания? Если да, то почему?
3. Как меняется ширина элементов? Вы из жс вывчисляете ширину и влоб устанавливаете каждому элементу или это на уровне ксс реализуется?
4. Какого типа у вас компоненты?
5. Используется ли shouldComponentUpdate?

Comments

[ValeraNakhuy]

1. Существует (10px)
2. Нет, это PureComponents
3. CSS (flex: )
4.
5. Да

[Виталий Киренков]

ValeraNakhuy, Тааакс, это уже любопытно)

А тестировали такие сценарии:

1. Оставить только меню
или
2. Оставить только контент

И запустить анимацию.

Так можно будет понять, по идее, в какую сторону копать дальше

[Виталий Киренков]

Да, ещё такой вопрос - нагрузка только при анимации? А если вы ресайзите окно, нагрузка повышается?

[ValeraNakhuy]

Виталий Киренков спасибо, идея хорошая, буду пробовать

Answer 3

[Алексей Лауд]

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

Answer 4

[rPman]

Почти наверняка вы 99% времени меняете DOM объектов, которых даже не видно на экране, так выставьте их реальное перемещение на скроллинг, двигая только те элементы, что сейчас видимы на экране.

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

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